New to Kendo UI for jQuery? Download free 30-day trial

Edit TreeView Nodes with a Form


Product Progress® Kendo UI® TreeView for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I enable users to edit the nodes of the Kendo UI for jQuery 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:">
    <h4>Editing employee: <span data-bind="text:"></span></h4>

    <label>Name: <input data-bind="value:"
    <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{
            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

In this article