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) {
      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) {
    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>
In this article
Not finding the help you need? Improve this article