New to Kendo UI for jQueryStart a free 30-day trial

Update the Selected Node in TreeView

Environment

ProductProgress® 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/service/v2/core";
      homogeneous = new kendo.data.HierarchicalDataSource({
        transport: {
          read: {
            url: serviceRoot + "/Employees"
          }
        },
        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
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support