What is the best way to set columnCssClass value conditionally in igGrid, for example based on a certain row property value?
Thanks!
To clarify, I am interested in setting the class of individual cells, not whole columns. The template property can help, as I see, but it only deals with cell's contents, not cells themselves.
Hello coder,
Thank you for posting in our community.
Your assumption is correct, template property is what you are looking for. You could use conditional templates for particular columns, check cell values and based on these vales set particular css class of your choice. For example the content of the cell could be wrapped in a divelement on which to apply the css class. For example:
$("#grid").igGrid({ columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" }, { headerText: "Availability", key: "Availability", dataType: "number", template: "<div class='{{if ${Availability} > 10}}backgorundColorGreen{{else}}backgorundColorRed{{/if}}'>${Availability}</div>" }, ], width: "500px", dataSource: products });
I am also attaching a small sample illustrating my suggestion for your reference. Please have a look at this sample and let me know if you have any additional questions afterwards.
Also, a working sample demonstrating how conditional templates are used could be found at the following link:
http://www.igniteui.com/templating-engine/conditional-templates
I hope you find my information helpful.
Please let me know if you need any further assistance with this matter.