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.
Vasya,
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 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.
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
is the template really necessary? i need to conditionally apply a css class for one column based on a true/false value in the dataset. this has to work dynamically and pick-up the change when values change.
is template the only option for that?
I am glad I was able to help! I passed on your feedback and I am sure we'll have improvements there once the limitations with editing are resolved (which is actually in the pipeline).
Thank you for using Infragistics products!
Best regards,
Stamen Stoychev
Thank you, Stamen!
I only wish that all of that was properly documented in the API.
It is possible to add classes to the TD elements for a column based on a conditional template. The grid knows when it has to wrap the result in a TD and when it gets the whole markup. However, if you have editing enabled for templated columns, due to a limitation in the procedure that updates the cell contents, the new result of the template will not be applied to the TD but only to its contents. You can call dataBind after each update if this is an issue for you (provided the changes are committed first).
I am attaching a sample for your reference.