Kendo TreeList - adding and updating rows

Question

Kendo TreeList - adding and updating rows

5.7k Views Asked by DarkDeny At 24 October 2025 at 08:40

I am using Kendo TreeList to display hierarchical data. Application allows user to add new rows to the displayed data, or edit existing ones. I am not using inline editing. Right now I add new rows by this piece of code:

treeList.dataSource.data().push(vm);

And if user edited some row, it is updated in dataSource:

for (i = 0; i < dsData.length; i++) {
    if (dsData[i].get("TaskUid") === vm.get("TaskUid")) {
        dsData[i] = vm;
        var curId = vm.get("VisualId");
        vm.set("VisualId", curId);
        grid.dataSource.read();
        onDataBound();
    }
}

There is a side effect - upon calling dataSource.read() newly added items disappear from the TreeList control. Question is - how am I supposed to add data and refresh data in treeList without such a side effect?

Original Q&A

There are 1 best solutions below

**himawan_r** · Accepted Answer

Probably you should consider to use

dataSource.pushCreate to add new element to the dataSource and
dataSource.pushUpdate to edit existing element inside the dataSource

I copy some example of basic dropdownlist, and add 3 button

first button will add a new parent node
second button will edit the first parent node which is jane smith
third button add new child node on jane smith

Do it like this :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

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

  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

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

<body>

  <!-- Define the HTML div that will hold the TreeList -->
  <div id="treelist"></div>
  <button id="new">Add new</button>
  <button id="editParent">Edit Jane Smith</button>
  <button id="addChild">Add child node to Jane Smith</button>
  <!-- Initialize the TreeList -->
  <script>
    $(document).ready(function() {
      $("#treelist").kendoTreeList({
        columns: [{
          field: "Name"
        }, {
          field: "Position"
        }],
        dataSource: {
          data: [{
            id: 1,
            parentId: null,
            Name: "Jane Smith",
            Position: "CEO"
          }, {
            id: 2,
            parentId: 1,
            Name: "Alex Sells",
            Position: "EVP Sales"
          }, {
            id: 3,
            parentId: 1,
            Name: "Bob Price",
            Position: "EVP Marketing"
          }]
        }
      });
    });

    $("#new").on("click", function() {
      var newElement = {
        id: 4,
        parentId: null,
        Name: "John Doe",
        Position: "HRD"
      };
      $("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
    });

    $("#editParent").on("click", function() {
      var updatedElement = {
        id: 1,
        parentId: null,
        Name: "Scooby Doo",
        Position: "CEO Pet"
      };
      $("#treelist").data("kendoTreeList").dataSource.pushUpdate(updatedElement);
    });

    $("#addChild").on("click", function() {
      var newElement = {
        id: 5,
        parentId: 1,
        Name: "Ricky Martin",
        Position: "EVP Legal"
      };
      $("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
    });
  </script>
</body>

</html>

Kendo TreeList - adding and updating rows

There are 1 best solutions below

Related Questions in KENDO-UI

Related Questions in TREELIST

Trending Questions

Popular # Hahtags

Popular Questions