New to Kendo UI for jQuery? Start a free 30-day trial

Save

events

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

save

Event Data

e.model `kendo.data.TreeListModel`

The data item to which the table row is bound.

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.

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

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        },
        update: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/Update",
          type: "POST",
          contentType: "application/json"
        },
        parameterMap: function(options, operation) {
          if (operation !== "read" && options.models) {
              return 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>

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

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        },
        update: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/Update",
          type: "POST",
          contentType: "application/json"
        },
        parameterMap: function(options, operation) {
          if (operation !== "read" && options.models) {
              return 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>

Save

save

Event Data

e.model kendo.data.TreeListModel

e.container jQuery

e.sender kendo.ui.TreeList

e.model `kendo.data.TreeListModel`

e.container `jQuery`

e.sender `kendo.ui.TreeList`