Add Custom Class to Grid Command CELL

4 posts, 1 answers
  1. Eric J at FADV
    Eric J at FADV avatar
    17 posts
    Member since:
    Oct 2012

    Posted 05 Apr 2016 Link to this post

    How can I add a custom class name to the grid CELL (not the buttons) of a command cell, and have it so that when new rows are added in batch edit mode, the classes are attached. I see no "attributes" attribute for the command cell.
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Apr 2016 Link to this post

    Hi Eric,
     
    To achieve this you could use the columns.attributes option. As an example: 
    //....
    columns: [
        //....    
       {attributes: {
           "class": "customClass",
       }, command: { text: "View Details" }, title: " " }
    ],


    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Eric J at FADV
    Eric J at FADV avatar
    17 posts
    Member since:
    Oct 2012

    Posted 08 Apr 2016 in reply to Iliana Nikolova Link to this post

    Thanks, but I am looking to apply a custom class to the command columns cells only, not all columns in the grid.
  7. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 12 Apr 2016 Link to this post

    Hello Eric,

    As documented in the columns.attributes section in our API reference article, the attributes are added to the TD elements for the column where they are set and not to all columns. If you need to apply that custom attribute to the command column you need to set them in that column's definition:
    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { command: "destroy",
         attributes: {
          "class": "table-cell"
         }
        }
      ],
      editable: true,
      dataSource: [ { name: "Jane Doe" } ]
    });
    </script>

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
Back to Top