Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
  <div id="tree"></div>
  Requests performed:<label id="counter"></label>
  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
  
  <script>
    var localData = [
      { id: 1, text: "Node 1", hasChildren: true, items: [
        { id: 101, text: "Node 1.1", hasChildren: true, items: [
          { id: 10101, text: "Node 1.1.1" }
        ] }
      ] }, 
      { id: 2, hasChildren: true, text: "Node 2" },
      { id: 3, hasChildren: true, text: "Node 3" }
    ];
    
    function get(data, id) {
      if (!id) {
        return data;
      } else {
        for (var i = 0; i < data.length; i++) {
          if (data[i].id == id) {
            return data[i].items;
          } else if (data[i].items) {
            var result = get(data[i].items, id);
            if (result) return result;
          }
        }
      }
    }
    
    var homogeneous = new kendo.data.HierarchicalDataSource({
      transport: {
        read: function (options) {
          var id = options.data.id;
          var data = get(localData, id);
          if (data) {
            options.success(data);
          } else {
            // mock call to server with static data
            // one can use $.ajax request and call options.success in success handler
            setTimeout(function() {
              options.success([
                { id: id + 1, text: "Remote node 1", hasChildren: false },
                { id: id + 2, text: "Remote node 2", hasChildren: true }
              ]);
            }, 1000);
          }
        }
      },
      schema: {
        model: {
          id: "id"
        }
      }
    });
    
    var requests = 0;
    
    $("#tree").kendoTreeView({
      dataSource: homogeneous,
      loadOnDemand:false,
      dataBound:function(){
        $('#counter').html(requests++);
      }
    });
    
  </script>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers