Kendo Treeview checkbox checked together with selected node

Question

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

You want only to check one item in node? What child should be checked if you select parent item? — dev_in_progress, Apr 09 '20 at 11:13
sorry I wasn`t expected that things. I edit the demo correctly based on my situation, No parents and child. — dontbannedmeagain, Apr 10 '20 at 00:08

score 0 · Accepted Answer · answered Apr 10 '20 at 11:32

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.

Thank you for answer. Do you mind to help me with my another question [here](https://stackoverflow.com/questions/61137386/kendo-multiselect-make-value-to-be-selected-and-disable). I'm really appreciate your help. — dontbannedmeagain, Apr 11 '20 at 07:13

Kendo Treeview checkbox checked together with selected node

1 Answers1