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

Update the Selected Node in TreeView

Environment

Product Progress Kendo UI TreeView

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>
In this article