Show Icons in Data Grid Columns

You can replace text with icons in a column of a Data Grid using CSS.

Here we will replace the text Yes and No with a green and a red colored icon respectively in the Published column of the Data Grid.

1. Create a lookup (Database, Repository List, or Web API).

2. Create a Grid Configuration using the lookup.

3. Create a form, and add a Data Grid control.

4. Modify properties of the Data Grid control as follows:

   1. In the Basic tab, set the Configuration Name property to the grid configuration created in Step 2.

5. Place images (icons) for replacing the text in the <Installpath>/Web/<BPMUITemplates>/NextGenForms/custom/Themes/<ThemeName>/images folder.

   Note:
   - If the image name is tagged with FormCustomPath:, the location of image is <Installpath>/Web/<BPMUITemplates>/NextGenForms/custom/images
   -If the image name is tagged with FormCustomThemePath:, the location of image is <Installpath>/Web/<BPMUITemplates>/NextGenForms/custom/Themes/<ThemeName>/images
   - For AVEVA Work Task Pro App, if the image name is tagged with FormCustomPath: or FormCustomThemePath:, the location is <Installpath>/Web/<BPMUITemplates>/NextGenForms/custom/images
   - For AVEVA Work Tasks Pro App, mapping of themes is not considered.

6. Create a CSS file, code it as follows, and place it in the <Installpath>/Web/<BPMUITemplates>/NextGenForms/custom/Themes/<ThemeName>/NextGenForms/css folder.

   .Published

   {

   background-repeat: no-repeat;

   background-image: url("../images/bullet_green.png");

   background-position: center;

   }

   .Draft

   {

   background-repeat: no-repeat;

   background-image: url("../images/bullet_red.png");

   background-position: center;

   }

7. Modify properties of the Data Grid control as follows:

   1. In the Advanced tab, set the script for the On Data Bound property as follows to replace text with icons in the Published column at run-time:

   var kGrid = e.sender;

   var allRows = $(kGrid)[0].tbody[0].children;

   ko.utils.arrayForEach(allRows, function(eachRow)

   {

   // Here 5 is the Published column

   // which is the fifth column in the Data Grid

   // with values Yes or No.

   var oldText = $(eachRow).find("td:eq(5)").text(), className = "";

   if(oldText === "Yes")

   {

   className = "Published";

   }

   else

   {

   className = "Draft";

   }

   $(eachRow).find("td:eq(5)").text("");

   $(eachRow).find("td:eq(5)").addClass(className);

   });

Note: The records in a grid are not filtered when text is replaced with icons.