edit

Fired when the user edits or creates a data item.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.container jQuery

The jQuery object representing the container element. That element contains the editing UI.

e.model kendo.data.TreeListModel

The data item which is going to be edited. Use its isNew method to check if the data item is new (created) or not (edited).

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribe 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 - subscribe 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