Custom css class are removed on td element when an action is done on kendo grid

[Julien]

I've added some personal css class on some data cell of my kendo table and when an action append on the grid (paging, sort, filter, grouping, etc.) all css class on td element disapear.

I cannot use a sub html element in the td: I must use the class on the td element.
Is there a way to maintain my css class on td?

[Ashwin]

I have the same issue and would like to know how to do this. Thanks.

[Jon]

I have the same exact question. 
Could somebody please answer this?

Thanks!

[Dimo]

Hello,

If the custom CSS class is added manually to the Grid, it will be removed once the Grid is rebound, because its table is re-rendered.

There are three ways to achieve the desired behavior.

1. You can use the column's attributes.

http://docs.kendoui.com/api/web/grid#configuration-columns.attributes

2. You can use a rowTemplate

http://docs.kendoui.com/api/web/grid#configuration-rowTemplate

3. You can add the CSS class in dataBound, i.e. after each paging, sorting and filtering action.

http://docs.kendoui.com/api/web/grid#events-dataBound

Of course, option 1 is most preferrable.

If the Grid is created from an existing table, option 3 is required.

Regards,
Dimo
Telerik

[Jon]

Thanks for the quick and clear answer!

[Steve]

Hi Dimo,

Using your first option works well for me.  How could I achieve this If I want to go down one level deeper and add a class to the <input> tag inside of the <td> (please see attachment).  Please provide code if possible

TIA

 

[Dimo]

Hi Steve,

There are two options to use a custom CSS class for a Grid field editor:

1) apply the class in the Grid's edit event
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

2) use a custom editor
http://demos.telerik.com/kendo-ui/grid/editing-custom

Regards,
Dimo
Telerik