Kendo

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="form">
  <div id="treeview" 
    data-role="treeview" 
    data-bind="source: data, events: { select: onSelect }" 
    data-drag-and-drop="true">
  </div>
  <div>
    <label data-role="label">Text:</label>
  </div>
  <div>
    <input type="text" id="textElement" data-bind="value: selectedNode.text" />
  </div>
</div>

JavaScript

VM = kendo.observable({
  data: kendo.observableHierarchy([{
    text: "Furniture",
    items: [{
      text: "Tables & Chairs"
    }, {
      text: "Sofas"
    }, {
      text: "Occasional Furniture"
    }]
  }, {
    text: "Decor",
    items: [{
      text: "Bed Linen"
    }, {
      text: "Curtains & Blinds"
    }, {
      text: "Carpets"
    }]
  }]),
  selectedNode: { text: "" },
  onSelect: function(e) {
    var treeview = e.sender,
        selectedDataItem = treeview.dataItem(e.node);
    
    this.set("selectedNode", selectedDataItem);
  }
});

kendo.bind($("#form"), VM);