What is the best way to set columnCssClass value conditionally in igGrid, for example based on a certain row property value?
Thanks!
Vasya,
The problem with that approach is that the cell itself (the TD element) has padding which prevents the DIV from extending all the way to the cell's borders, i.e. there is still a visible gap surrounding the DIV.
In fact, someone posted a related question about this http://ko.infragistics.com/community/forums/t/105307.aspx
Hello coder,
Thank you for getting back to me.
Having in mind that currently igGrid does not support row templates I believe the best option for your scenario is using column templates.
What I can suggest in regards to the div element`s styling is setting width and height of the element to 100%.
If you have any particular performance issues due to this templates please feel free to send me a small isolated sample where the issue is reproducible and I would investigate this matter further.
Please feel free to contact me if you have any additional questions regarding this matter.
Thank you for the information. Yes, I am familiar with templates. There 2 problems with them, however:
1) You can only modify the cell contents, but not the containing cell itself. For example, if I need to change the cell background conditionally, I will need to create a nested DIV (like in your example) and then somehow tweak it to make it fill the whole cell so it doesn't have the padding around it.
2) If I want to apply a conditional template to the whole row, I will be forced to create a separate template for each and every column, and they are only going to be different by the data property name to display. Quite an overkill, in my opinion.
Any other ideas?
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.
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.