Show Checkbox in Root Nodes of the TreeList

Environment

Product Version	2019.3.1023
Product	Progress® Kendo UI® TreeList for jQuery

Description

How can I show the checkbox in the checkbox column of the Kendo UI TreeList for the root nodes only?

Solution

1. Set the visibility of all the checkboxes to hidden in the columns.template property as seen below:

     columns: [{ 
       template: "<input style='visibility: hidden;' type='checkbox' data-bind='checked: checked' />"
     }]
   

2. Use the dataBound event to run the following JavaScript function:

     dataBound: function(e) {
       var view = this.dataSource.view();
       this.items().each(function(index, row) {
         if(!view[index].parentId)
       row.childNodes[0].childNodes[0].style.visibility = 'visible';
         else
       row.childNodes[0].childNodes[0].style.visibility = 'hidden';
         kendo.bind(row, view[index]);
       })
     }
   

Example

<div id="treelist"></div>

<script>
  var dataSource = new kendo.data.TreeListDataSource({
    data: [
      { id:  1, Name: "Daryl Sweeney", Position: "CEO", Phone: "[phone]", parentId: null },
      { id:  2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "[phone]", parentId: null, checked: true },
      { id:  3, Name: "Priscilla Frank", Position: "Chief Product Officer", Phone: "[phone]", parentId: 1 },
      { id:  4, Name: "Ursula Holmes", Position: "EVP, Product Strategy", Phone: "[phone]", parentId: 3 },
      { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "[phone]", parentId: 32 },
      { id: 24, Name: "Melvin Carrillo", Position: "Director, Developer Relations", Phone: "[phone]", parentId: 3 },
      { id: 29, Name: "Martha Chavez", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
      { id: 30, Name: "Oren Fox", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
      { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "[phone]", parentId: 2 },
      { id: 41, Name: "Amos Barr", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
      { id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "[phone]", parentId: 32 },
      { id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "[phone]", parentId: 32 },
      { id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
      { id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "[phone]", parentId: 46 },
      { id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
      { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "[phone]", parentId: 11 },
      { id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "[phone]", parentId: 11 }
    ]
  });

  function toggleAll(e) {
    var view = dataSource.view();
    var checked = e.target.checked;
    for (var i = 0; i < view.length; i++) {
      view[i].set("checked", checked);
    }
  }

  $("#treelist").kendoTreeList({
    dataSource: dataSource,
    height: 540,
    columns: [
      {
        headerTemplate: "<input type='checkbox' onclick='toggleAll(event)' />",
        template: "<input type='checkbox' style='visibility: hidden;' data-bind='checked: checked' />",
        width: 32
      },
      { field: "Position", expandable: true },
      { field: "Name" },
      { field: "Phone" }
    ],
    dataBound: function() {
      var view = this.dataSource.view();
      this.items().each(function(index, row) {
        if(!view[index].parentId)
          row.childNodes[0].childNodes[0].style.visibility = 'visible';
        else
          row.childNodes[0].childNodes[0].style.visibility = 'hidden';
        kendo.bind(row, view[index]);
      })
    }
  });
</script>

See Also

• Show Checkbox Column
• CSS visibility
• columns.template
• dataBound