I am trying to add an icon with a specific color to a column in my grid, based on a condition. So I have value 1,2 and 3. The icon shape should be the same but the color needs to be green, orange or red.Now i managed to add the icon to an action column with this configuration:
but this is not what I want. I want the color to be differnt based on a condition. So I am trying the number column in combination with the conditional format section like this:But to be honest, i don not know how to formulate the expression in the cellclass field. I tried almost everything but I doesn't seem to show the wanted result:
Does anybody know how to get the expression correct so that it will show an icon based on the condition?
Hi Rogier,
1) One of the approach is to explicitly inject the icon html conditionally using JS in the GridOnInitialize event handler action flow as shown below.
Note: You can add pre-defined style class instead of defining an inline style property.
Demo Screen: DG_Add_Icon_ActionCol
Refer to the attached oml.
2) The other approach is to prepare the Grid source data - by explicitly including the icon html conditionally in one of the dataSource column/attribute: how-to-show-icons-based-on-a-condition-in-the-row
I hope this helps you!
Kind regards,
Benjith Sam
Hi Ricardo,
I tried option 2. This did not work in several types of columns (action,text and number columns). What happens is that the columns just shows the HTML in text. Like this:Anyway I will try option 1. But I do have the following questions:
-Do you always use the action column? I do not want the mouseover action but just a static icon.- Is there a solution where you only show the icon and not text + icon? Kind regards,
Rogier.
I tried to prepare the Grid source data with the exact html conditionally. This worked fine. Thank you for your help!
You're welcome, Rogier. Glad to help :)
Hi,
You can create a container and put the icon in that container, and then, create your condition in the Style classes property of that container:
Hope this can help.
Best regards,
Ricardo
Thanks Ricardo, I am looking for a solution for a datagrid. Not for a normal table.
Hi!
I believe you only must add to the class you already have the color class for example "text-green"
It's me again
The class field for the condition green should look like:
"icon fa fa-check-circle text-green"
but it will add the icon before the number "StatusKleurCode"
Regards
Graça