save

Fires when a data item is saved. The event handler function context (available through the this keyword) will be set to the widget instance.

Event Data

e.model kendo.data.TreeListModel

The data item to which the table row is bound.

e.container jQuery

The jQuery object which represents the current editor container element. If the editable.mode is inline, the container will be the edited row. If it is set to popup, then the container element will be the window element.

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribing to the save event before initialization

<div id="treeList"></div>
<script>

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All",
          dataType: "jsonp"
        },
        update: {
          url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Update",
          dataType: "jsonp"
        },
        parameterMap: function(options, operation) {
          if (operation !== "read" && options.models) {
            return {models: kendo.stringify(options.models)};
          }
        }
      },
      batch: true,
      schema: {
        model: {
          id: "EmployeeId",
          parentId: "ReportsTo",
          fields: {
            EmployeeId: { type: "number", editable: false, nullable: false },
            ReportsTo: { nullable: true, type: "number" },
            HireDate: {type: "date"},
            BirthDate: {type: "date"}
          },
          expanded: true
        }
      }
    },
    editable: "popup",
    height: 540,
    columns: [
      { field: "FirstName", expandable: true, title: "First Name", width: 250 },
      { field: "LastName", title: "Last Name" },
      { field: "Position" },
      { command: ["edit"] }
    ],
    save: function(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("save row");
    }
  });
</script>

Example - subscribing to the save event after initialization

<div id="treeList"></div>
<script>

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All",
          dataType: "jsonp"
        },
        update: {
          url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Update",
          dataType: "jsonp"
        },
        parameterMap: function(options, operation) {
          if (operation !== "read" && options.models) {
            return {models: kendo.stringify(options.models)};
          }
        }
      },
      batch: true,
      schema: {
        model: {
          id: "EmployeeId",
          parentId: "ReportsTo",
          fields: {
            EmployeeId: { type: "number", editable: false, nullable: false },
            ReportsTo: { nullable: true, type: "number" },
            HireDate: {type: "date"},
            BirthDate: {type: "date"}
          },
          expanded: true
        }
      }
    },
    editable: "popup",
    height: 540,
    columns: [
      { field: "FirstName", expandable: true, title: "First Name", width: 250 },
      { field: "LastName", title: "Last Name" },
      { field: "Position" },
      { command: ["edit"] }
    ]
  });

  function save(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("save row");
  }

  var treeList = $("#treeList").data("kendoTreeList");
  treeList.bind("save", save);
</script>