Add dropdown symbol for specific flexgrid row

Add dropdown symbol for specific flexgrid row

Posted by: mmurugesan on 22 March 2019, 5:21 pm EST

• 

  mmurugesan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 March 2019, 5:21 pm EST - Updated 3 October 2022, 8:07 pm EST

  Hi,

  I need to have the dropdown symbol at the end of the specific row in my flexgrid. My grid is having 2 columns with mixed data-type. The requirement is let the user know which row is required, disabled, dropdown etc.

  I achieved all these through row.cssClass except the dropdown one. Here is the existing code.

         if (!attributeField.FieldDetails._editable) {
              row.cssClass = "field-read-only";
          }
          if (attributeField.FieldDetails._required
              row.cssClass = "field-required";
          }
          if (this.name.toLowerCase() === this.displayFieldName.toLowerCase()) {
              row.cssClass = "field-display-field";
          }
  

  I’ve to add another logic like below:-

          if (attributeField.FieldDetails._fieldType == FieldType.Dropdown) {
              row.cssClass = "field-dropdown-type";
          }
  

  So, in my “field-dropdown-type” I should have the style to show the dropdown symbol for that row. Please refer the attached image. In the attached image for the “Premises_type” row I need to add a kind of symbol looks like in the image. So the user will know that the row is dropdown selectable value.

  Appreciate your help on this.

  

• 

  mmurugesan

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 5:23 pm EST - Updated 3 October 2022, 8:07 pm EST

  Please note I cannot add image through my css. So I need only is symbol/code/content.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 25 March 2019, 7:27 am EST

  In order to add an image, you will need to implement the itemFormatter property of Flexgrid. You can directly add HTML content to the row to append the image to the cell easily.

  To show the dropdown, you will need to use the dataMap property of Flexgrid’s column.

  Here is a sample for the same:

  https://jsfiddle.net/n93eajgf/

• 

  mmurugesan

  • Post Options:
  • Link
    Copy

  Posted 25 March 2019, 1:57 pm EST

  Yes it worked. Thank you very much Abhishek. Here is my new code based on your suggestion.
  
  if (panel.columns[c].binding === “Value” && _fieldType == FieldType.Dropdown) {
  
  cell.innerHTML +=

  <span class="field-dropdown-field wj-glyph-down"></span>

  ;
  
  }