cancel

Fires when the user clicks the Cancel button (in inline or popup edit mode) or closes the popup window. 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 that represents the edit form container element.

e.model kendo.data.TreeListModel

The data item to which the table row is bound.

e.preventDefault Function

If invoked, prevents the cancel action. The table row remains in edit mode.

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribing to the cancel event before initialization

<div id="treeList"></div>
 <script>
    $("#treeList").kendoTreeList({
      columns: [
        { field: "Name" },
        { field: "Position" },
        { command: [ "edit" ] }
      ],
      editable: true,
      dataSource: [
        { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
        { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
      ],
      cancel: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("cancel");
      }
    });
</script>

Example - subscribing to the cancel event after initialization

<div id="treeList"></div>
 <script>
    function cancel(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("cancel");
    }
    $("#treeList").kendoTreeList({
      columns: [
        { field: "Name" },
        { field: "Position" },
        { command: [ "edit" ] }
      ],
      editable: true,
      dataSource: [
        { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
        { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
      ]
    });

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