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

Remove

events

Fires when the user clicks the Destroy command button. The event handler function context (available through the this keyword) will be set to the widget instance.

remove

Event Data

e.model `kendo.data.TreeListModel`

The data item to which the table row is bound.

e.row `jQuery`

The jQuery object which represents the current table row.

e.sender `kendo.ui.TreeList`

The widget instance which fired the event.

e.preventDefault `Function`

If invoked, prevents the removal of the data item. The table rows will remain unchanged.

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

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        },
        destroy: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/Destroy",
          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
        }
      }
    },
    toolbar: [ "create" ],
    editable: "popup",
    height: 540,
    columns: [
      { field: "FirstName", expandable: true, title: "First Name", width: 250 },
      { field: "LastName", title: "Last Name" },
      { field: "Position" },
      { command: ["destroy"] }
    ],
    remove: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("remove");
    }
  });
</script>

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

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        },
        destroy: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/Destroy",
          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
        }
      }
    },
    toolbar: [ "create" ],
    editable: "popup",
    height: 540,
    columns: [
      { field: "FirstName", expandable: true, title: "First Name", width: 250 },
      { field: "LastName", title: "Last Name" },
      { field: "Position" },
      { command: ["destroy"] }
    ]
  });

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

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

Remove

remove

Event Data

e.model kendo.data.TreeListModel

e.row jQuery

e.sender kendo.ui.TreeList

e.preventDefault Function

e.model `kendo.data.TreeListModel`

e.row `jQuery`

e.sender `kendo.ui.TreeList`

e.preventDefault `Function`