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

Edit

events

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.

edit

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.

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

<script>
  var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read:  {
          url: crudServiceBaseUrl + "/EmployeeDirectory/All"
        },
        update: {
          url: crudServiceBaseUrl + "/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" },
            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>

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

<script>
  var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

  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"
        },
        update: {
          url: crudServiceBaseUrl + "/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" },
            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>

Edit

edit

Event Data

e.container jQuery

e.model kendo.data.TreeListModel

e.sender kendo.ui.TreeList

e.container `jQuery`

e.model `kendo.data.TreeListModel`

e.sender `kendo.ui.TreeList`