Search code examples
javascriptjquerykendo-uitreeviewkendo-treeview

Change a Kendo TreeView Node Name with Javascript - I don't see how to do this

I am wanting to Edit the name of a parent Node that I select

  1. I know how to Add a New Parent Node with javascript append

    var selectedNode = treeview.select();
treeview.append({ ReportGroupName: $("#addNodeText").val()

  2. I know how to display the selected Node in a textbox 

     $("#groupNameSelected").val(nodeName);

    -- which is called with select: onSelect,

However , I want to CHANGE the Node Text

I was googling and looking at the API , I want a clean javascript or jquery way to simply update the treeview

I have been setting the code up like this

var treeview = $("#treeview").data("kendoTreeView");
var selected = treeview.select(), item = treeview.dataItem(selected);

if (item) {
   console.log('Selected item: ' + item.ReportGroupName + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
}

But how do I just Change the Treeview selected node text ?

Update:

I found this code on a telerik forum.
It does change the text, but AFTER I try and write the treeview data out 

 console.log(mydatasource.data());  // i expect this to change as adding nodes does update this ...



function refreshTreeNode(data)
{
    var currentText = $("#treeview").data("kendoTreeView").select().find('span.k-in').first().text();
    var node = $("#treeview").data("kendoTreeView").select().find('span.k-in').first();
    var nodeSpan = $("#treeview").data("kendoTreeView").select().find('span.k-in > span.k-sprite').first();
    node.text('');
    node.append(nodeSpan);
    node.append(data);
}

The changes to the data are not occurring to the treeview data, only on the UI i see the change. why?

Solution

  • The reason why it only change the UI is because the data which is stored on the datasource is not changed

    Instead, there is better solution depend on what do you know about the data, which is :

    1. Datasource (you need to be able to access the datasource to utilize datasource.get() and set())
    2. The record Id ( you can use datasource.get(id) to get the data from datasource if you know the id)
    3. The record uid ( if you don't, you can use the uid property to see them try inspect element)

    Instruction for below example :

    1. Expand all node
    2. Select any node
    3. Type Name To replace with
    4. Hit the "Change Name" button
    5. To see the update on the datasource Hit the Check Data Source button and open console then you can search it there

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Kendo UI Snippet</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="treeview"></div>
  <input type="text" id="changeNameTo"></input>
  <button id="changeNameNow">Change Name</button>
  <button id="checkDataSource">Check Datasource Data on console</button>
  <script>
    var dataSource = new kendo.data.HierarchicalDataSource({
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Employees",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "EmployeeId",
          hasChildren: "HasEmployees"
        }
      }
    });

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


    $("#changeNameNow").on("click", function() {
      //get the data from datasource using id (if you know the id)
      //dataSource.get(2).set("FullName",$("#changeNameTo").val());

      //if you don't, try utilize data-uid
      dataSource.getByUid($(".k-state-selected").parent().parent().attr("data-uid")).set("FullName", $("#changeNameTo").val());
    });

    $("#checkDataSource").on("click", function() {
      console.log(dataSource.data());
    });
  </script>
</body>

</html>