Update the Selected Node in TreeView

Environment

Product

Progress® Kendo UI® TreeView for jQuery

Description

How can I update the text of the selected node in Kendo UI for jQuery TreeView?

Solution

1. Find the dataItem of the selected node.
2. Use the set method to update the node.

    <label>Value: <input id="update-textbox" class="k-textbox" value="abc" /></label>
    <button id="change-text" onclick="changeText()">Change text</button>
    <div id="treeview"></div>

    <script>
      var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
      homogeneous = new kendo.data.HierarchicalDataSource({
        transport: {
          read: {
            url: serviceRoot + "/Employees",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeId",
            hasChildren: "HasEmployees"
          }
        }
      });

      $("#treeview").kendoTreeView({
        dataSource: homogeneous,
        dataTextField: "FullName"
      });

      function changeText(){
        var tv = $("#treeview").data('kendoTreeView')
        var selected = tv.select();
        var node = tv.dataItem(selected);
        var text = $("#update-textbox").val();
        node.set("FullName", text);
      }
    </script>