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>
    <title></title>
  <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.web.min.js"></script>
</head>
<body>
  <div id="example" class="k-content">
    <div id="treeview" class="demo-section"></div>
    
    <script>
      $(document).ready(function() {
        // TreeView bound to Categories > Products > OrderDetails
        
        var OrderDetails = {
          type: "odata",
          transport: {
            read: {
              url: function(options) {
                return kendo.format("http://demos.kendoui.com/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
              }
            }
          },
          schema: {
            model: {
              hasChildren: function() {
                return false;
              }
            }
          }
        };
        
        var Products = {
          type: "odata",
          schema: {
            model: {
              id: "ProductID",
              hasChildren: "Order_Details",
              children: OrderDetails
            }
          },
          transport: {
            read: {
              url: function(options) {
                return kendo.format("http://demos.kendoui.com/service/Northwind.svc/Categories({0})/Products", options.CategoryID);
              }
            }
          }
        };
        
        var Categories = new kendo.data.HierarchicalDataSource({
          type: "odata",
          transport: {
            read: {
              url: "http://demos.kendoui.com/service/Northwind.svc/Categories"
            }
          },
          schema: {
            model: {
              hasChildren: "Products",
              id: "CategoryID",
              children: Products
            }
          }
        });
        
        $("#treeview").kendoTreeView({
          dataSource: Categories,
          dataTextField: ["CategoryName", "ProductName", "OrderID"],
          dragAndDrop: true,
          dragend: function(e) {
            console.log(e.sourceNode);
          }
        });
      });
    </script>
    
    <style scoped>
      #example {
        text-align: center;
      }
      
      .demo-section {
        display: inline-block;
        vertical-align: top;
        width: 320px;
        height: 300px;
        text-align: left;
        margin: 0 2em;
      }
    </style>
  </div>
</body>
</html>
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers