Edit Nodes via Form

Your project might require you to enable users to edit the nodes of the TreeView.

The following example demonstrates how to achieve this behavior by using a standalone form.

  <!-- TreeView -->
  <div class="box-col" id="tree">
    <div data-role="treeview" data-text-field="name"
         data-bind="source: treeData, events: { select: change }"></div>

  <!-- edit form -->
  <div class="box-col" id="edit-form" data-bind="visible: selectedItem.name">
    <h4>Editing employee: <span data-bind="text: selectedItem.name"></span></h4>

    <label>Name: <input data-bind="value: selectedItem.name"
    <label>Age: <input data-bind="value: selectedItem.age"

    kendo.bind("body", {
        selectedItem: {},
        change: function(e) {
            this.set("selectedItem", e.sender.dataItem(e.node));
        treeData: new kendo.data.HierarchicalDataSource({
            data: [
                { name: "John Smith", age: 34 },
                { name: "Jane Doe", age: 30, expanded: true, items: [
                    { name: "Peter Smith", age: 34 },
                    { name: "Gordon Brown", age: 28 }
                ] },
                { name: "Maxwell Smith", age: 48 }
    .k-treeview .k-in {
      padding: 5px;
    label {
      display: block;
    .box-col { float: left; width: 250px; }

See Also

For more runnable examples on the Kendo UI TreeView, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article