Search code examples
javascriptcheckboxkendo-uikendo-treeviewkendo-template

How to manually check treeView checbox through an array?

In the code below, unable to set the checkbox to checked. I would like to set certain checkbox checked=true. is there any way to solve the problem in kendo-mvvm where the databind will be done in the html part?

expected output is

[ ]General
   [X]Name
   [ ]Device
   [X]Status


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      $("#treeview").kendoTreeView({
        dataSource: {
          data:  [{
        id: 7,
        parent_id: 0,
        text: "Work Order assignment",
        value: "Work Order assignment",
        expanded: true,
        items: [
            { id: 71, parent_id: 7, text: "Name", value: "woName" },
            { id: 72, parent_id: 7, text: "Device", value: "woDevice" },
            { id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
    }]
        },
        checkboxes: true
      });
      
      var values = ["woName","woStatus"];
      
      var setTreeViewValues = function(values) {
        var tv = $("#treeview").data("kendoTreeView");
        
        tv.dataItems().forEach(function(dataItem) {
          if (values.indexOf(dataItem.text) > -1) {
            dataItem.set("checked", true);
          }
        });
      };
      
      setTreeViewValues(values);
    });
  </script>
</head>
<body>
  <div id="treeview"></div>
</body>
</html>

Solution

  • $("#treeview").data("kendoTreeView").dataItems() this method does not return all items in tree. It returns first level items. So if you want to check child nodes you may want to travel nodes recursively.

    indexOf(string) function doesn't work with javascript arrays. You need to get values in loop. http://www.w3schools.com/jsref/jsref_indexof.asp 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  <script>
     $(function() {
      $("#treeview").kendoTreeView({
        dataSource: {
          data:  [{
          id: 7,
          parent_id: 0,
          text: "Work Order assignment",
          value: "Work Order assignment",
          expanded: true,
          items: [
              { id: 71, parent_id: 7, text: "Name", value: "woName" },
              { id: 72, parent_id: 7, text: "Device", value: "woDevice" },
              { id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
        }]
        },
        checkboxes: true
      });
      
      var dataItems = $("#treeview").data("kendoTreeView").dataItems();
      
      setTreeViewValues(dataItems);
    });
    
    var values = ["woName","woStatus"];
    
    function setTreeViewValues(dataItems){
            dataItems.forEach(function(dataItem){
                values.forEach(function(value){
                    if (value.indexOf(dataItem.text) > -1) {
                        dataItem.set("checked", true);
                    }
                    if(dataItem.hasChildren){
                        // checking child dataItems recursively
                        setTreeViewValues(dataItem.children.data()); 
                    }
                });
            });
        }
    
  </script>
</head>
<body>
  <div id="treeview"></div>
</body>
</html>