This is a migrated thread and some comments may be shown as answers.

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

6 Answers 981 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Julien
Top achievements
Rank 1
Julien asked on 18 Jul 2012, 11:55 AM
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?

6 Answers, 1 is accepted

Sort by
0
Ashwin
Top achievements
Rank 1
answered on 10 Aug 2012, 10:21 PM
I have the same issue and would like to know how to do this. Thanks.
0
Jon
Top achievements
Rank 1
answered on 15 Jan 2014, 12:47 PM
I have the same exact question. 
Could somebody please answer this?

Thanks!

0
Dimo
Telerik team
answered on 15 Jan 2014, 02:10 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
answered on 15 Jan 2014, 02:32 PM
Thanks for the quick and clear answer!

0
Steve
Top achievements
Rank 1
answered on 23 Sep 2015, 03:25 PM

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

 

0
Dimo
Telerik team
answered on 25 Sep 2015, 11:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Julien
Top achievements
Rank 1
Answers by
Ashwin
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Dimo
Telerik team
Steve
Top achievements
Rank 1
Share this question
or