Grid - Columns.Selectable - Title and Disable on certain rows

4 posts, 0 answers
  1. Surjeet
    Surjeet avatar
    2 posts
    Member since:
    Aug 2015

    Posted 16 Aug 2018 Link to this post

     Hi,

      I have tried looking through documentation and searching online, but have not found an answer to this.

      Taking the example at:  https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.selectable

      How could I change the code to satisfy these two requests:

        1.  Show a title in the header "Select Rows"

        2.  If the name is "John Doe", the row should not be selectable, and instead of the checkbox, I would like to see the name "John Doe".

     

    Thanks.

     

     

  2. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 20 Aug 2018 Link to this post

    Hi Surjeet,

    A possible solution to set a title is to use a headerTemplate.

    Furthermore you can disable any checkbox via CSS.

    Below you will find a small sample which demonstrates both of the above approaches:



    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Surjeet
    Surjeet avatar
    2 posts
    Member since:
    Aug 2015

    Posted 24 Aug 2018 in reply to Georgi Link to this post

    Thanks.  The code helps a lot.  However, one part is still missing

    "2.  If the name is "John Doe", the row should not be selectable, and
    instead of the checkbox, I would like to see the name "John Doe"."

      How could I change the value of the column to show "John Doe" instead of the checkbox

     

     

  4. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 28 Aug 2018 Link to this post

    Hi Surjeet,

    A possible solution is to iterate through the rows and check for the name within the dataBound event handler.

    e.g.

    dataBound:function(){
      var grid = this;
       
      grid.tbody.find('tr').each(function(){
        var row = $(this);
        var dataItem = grid.dataItem(row);
         
        if(dataItem.name === 'John Doe'){
          row.find('td').eq(0).html(dataItem.name)
        }
         
      })
    }

    Below you will find a modified version of the sample:



    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top