Search code examples
javascriptkendo-uikendo-gridkendo-treeview

Kendo Treeview checkbox checked together with selected node

I manage to make checkbox only can be checked at 1 time, but I need help to find the solution if checkbox is checked the node will be selected as well k-state-selected. Appreciate your help!

Here I provide a simple demo

Solution

  • Check this out:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
  
    <div id="treeview"></div>
    <script>
        $("#treeview").kendoTreeView({
            checkboxes: true,
            check: function(e){
              var dataItem = this.dataItem(e.node);
              var rootNodes = $("#treeview").getKendoTreeView().dataSource.data();
              traverse(rootNodes, function(node) {
                if (node != dataItem) {
                  node.set("checked", false);
                  //node.select($());
                  //node.select().find("span.k-state-selected")
                }
              });
            },
          	select: function(e) {
              var dataItem = this.dataItem(e.node);
              dataItem.checked = true;
              $(e.node).find('input').prop('checked', 'checked');
              this.trigger('check', e);
            },
          dataSource: [ { id: 3, text: "about.html" },
                       { id: 4, text: "index.html"},
                       { id: 5, text: "logo.png"},                        
                       { id: 7, text: "mockup.jpg" },
                       { id: 8, text: "Research.pdf"},
                       { id: 10, text: "February.pdf" },
                       { id: 11, text: "March.pdf" },
                       { id: 12, text: "April.pdf" }]
        });
      
        function traverse(nodes, callback) {
          for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            var children = node.hasChildren && node.children.data();
            callback(node);
            if (children) {
              traverse(children, callback);
            }
          }
        }
      
      	$("#treeview").on('change', 'input', function() {
          let $li = $(this).closest('li');
          $("#treeview").data('kendoTreeView').select($li);
        });
    </script>
</body>
</html>

    I've added the following code:

    // To the grid options
select: function(e) {
    var dataItem = this.dataItem(e.node);
    dataItem.checked = true;
    $(e.node).find('input').prop('checked', 'checked');
    this.trigger('check', e);
},

// After grid initialization
$("#treeview").on('change', 'input', function() {
    let $li = $(this).closest('li');
    $("#treeview").data('kendoTreeView').select($li);
});

    The first snippet makes sure that selecting an item by clicking it's label, the checkbox will be checked as well. That event also call check event to uncheck other items.

    The last one makes sure a checkbox changed will be trigger the select event, doing the same as above.

    I hope it helps.