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

Cancel

events

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.

cancel

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.

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

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

Cancel

cancel

Event Data

e.container jQuery

e.model kendo.data.TreeListModel

e.preventDefault Function

e.sender kendo.ui.TreeList

e.container `jQuery`

e.model `kendo.data.TreeListModel`

e.preventDefault `Function`

e.sender `kendo.ui.TreeList`