saveChanges

Fires when the user clicks the Save command button. The event handler function context (available through the this keyword) will be set to the widget instance.

Event Data

e.preventDefault Function

If invoked, the TreeList will not call the sync method of the data source.

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribing to the saveChanges event during initialization

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ],
    editable: "incell",
    toolbar: ["save"],
    saveChanges: function(e) {
      if (!confirm("Are you sure you want to save all changes?")) {
        e.preventDefault();
      }
    }
  });
</script>

Example - subscribing to the saveChanges event after initialization

<div id="treeList"></div>
<script>
  function treelist_saveChanges(e) {
    if (!confirm("Are you sure you want to save all changes?")) {
      e.preventDefault();
    }
  }

  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ],
    editable: "incell",
    toolbar: ["save"]
  });
  var treeList = $("#treeList").data("kendoTreeList");
  treeList.bind("saveChanges", treelist_saveChanges);
</script>
In this article