edit

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

Event Data

e.container jQuery

The jQuery object which represents the container element. The container element contains the editing UI.

e.model kendo.data.TreeListModel

The data item which will be edited. To check if the data item is new (created) or not (edited), use its isNew method.

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribing to the edit event before initialization

<div id="treelist"></div>

<script>
  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read:  {
          url: crudServiceBaseUrl + "/EmployeeDirectory/All",
          dataType: "jsonp"
        },
        update: {
          url: crudServiceBaseUrl + "/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" },
            FirstName: { validation: { required: true } },
            LastName: { validation: { required: true } },
            Position: { type: "string" }
          },
          expanded: true
        }
      }
    },
    height: 300,
    editable: true,
    columns: [
      { field: "FirstName", expandable: true, title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 100 },
      { field: "Position" },
      { command: ["edit"] }
    ],
    edit: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("edit");
    }
  });
</script>

Example - subscribing to the edit event after initialization

<div id="treelist"></div>

<script>
  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

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

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read:  {
          url: crudServiceBaseUrl + "/EmployeeDirectory/All",
          dataType: "jsonp"
        },
        update: {
          url: crudServiceBaseUrl + "/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" },
            FirstName: { validation: { required: true } },
            LastName: { validation: { required: true } },
            Position: { type: "string" }
          },
          expanded: true
        }
      }
    },
    height: 300,
    editable: true,
    columns: [
      { field: "FirstName", expandable: true, title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 100 },
      { field: "Position" },
      { command: ["edit"] }
    ]
  });

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