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

7 posts, 0 answers
  1. Julien
    Julien avatar
    4 posts
    Member since:
    Jul 2010

    Posted 18 Jul 2012 Link to this post

    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?
  2. Ashwin
    Ashwin avatar
    3 posts
    Member since:
    Jun 2012

    Posted 10 Aug 2012 Link to this post

    I have the same issue and would like to know how to do this. Thanks.
  3. Jon
    Jon avatar
    14 posts
    Member since:
    Sep 2010

    Posted 15 Jan 2014 Link to this post

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

    Thanks!

  4. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 15 Jan 2014 Link to this post

    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!
  5. Jon
    Jon avatar
    14 posts
    Member since:
    Sep 2010

    Posted 15 Jan 2014 Link to this post

    Thanks for the quick and clear answer!

  6. Steve
    Steve avatar
    41 posts
    Member since:
    Apr 2015

    Posted 23 Sep 2015 in reply to Dimo Link to this post

    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

     

  7. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 25 Sep 2015 Link to this post

    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!
Back to Top