Setting <td> attributes (columns.attributes) on per-cell basis.

[Eugene]

In my application I need to set a class of the <td> element for all cells in the grid.  If done at the column level via column.attributes = {class: 'myClass'} everything works great.  Unfortunately I need to do this on a per-cell basis.  Specifically different cells in the same column will have different classes applied to the <td> element based on the bound data object.  Is there a way to set attributes on per-cell basis, or is there an alternative approach to achieving my goal?

Thanks a lot.

[Kiril Nikolov]

Hi Eugene,

There is no way to set per cell attributes. You can however use the dataBound event and handle this functionality with some custom jQuery code. Here is a sample that you can use as a foundation for your project:

http://dojo.telerik.com/UkUJ

Regards,
Kiril Nikolov
Telerik

 

 

[Eugene]

Thank you.  That does work, but forces the creation of additional class setting logic via the use of jQuery in the databound event, which I would like to avoid.  One of my team mates actually came up with what I would consider a pretty elegant solution.  Specifically we set the attributes objects class property to an angular template like so.  

column.attributes = {
                'class': '{{dataItem.' + column.field + 'Class}}'
            };

Then we set the dataItem's ColumnNameClass property to the class value specific to that cell.  That seems to work pretty well.  I have only tried it with angular template, so not sure if it would work with kendo templates.  Can you see any downside to using that method?

[Kiril Nikolov]

Hello Eugene,

Well this should work, but it is more due to a side effect how the templates are rendered, and not the officially supported approach. It will be faster than the jQuery approach, and if it works in your scenario, than you can use ti.

Regards,
Kiril Nikolov
Telerik