cancel

Fired when the user clicks the "cancel" button.

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

Example

<script type="text/x-kendo-tmpl" id="template">
<div> #:name# </div>
</script>

<script type="text/x-kendo-tmpl" id="editTemplate">
 <div>
   Name: <input type="text" data-bind="value:name" name="name" required="required" />
   <div>
       <a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
       <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
  </div>
  </div>
</script>

<div id="listView"></div>
<script>
  $("#listView").kendoListView({
    template: kendo.template($("#template").html()),
    editTemplate: kendo.template($("#editTemplate").html()),
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 47 },
        { id: 2, name: "John Doe", age: 50 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            id: { type: "number" },
            name: { type: "string" },
            age: { type: "number" }
          }
        }
      }
    },
    cancel: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
                console.log("Cancelled editing of item with id " + e.model.id);
    }
  });
  var listView = $("#listView").data("kendoListView");
  listView.edit(listView.content.children().first());
</script>

To set after initialization

<script type="text/x-kendo-tmpl" id="template">
<div> #:name# </div>
</script>

<script type="text/x-kendo-tmpl" id="editTemplate">
 <div>
   Name: <input type="text" data-bind="value:name" name="name" required="required" />
   <div>
       <a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
       <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
  </div>
  </div>
</script>

<div id="listView"></div>
<script>
  $("#listView").kendoListView({
    template: kendo.template($("#template").html()),
    editTemplate: kendo.template($("#editTemplate").html()),
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 47 },
        { id: 2, name: "John Doe", age: 50 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            id: { type: "number" },
            name: { type: "string" },
            age: { type: "number" }
          }
        }
      }
    }
  });
  var listView = $("#listView").data("kendoListView");
  // bind to the cancel event
  listView.bind("cancel", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Cancelled editing of item with id " + e.model.id);
  });
  listView.edit(listView.content.children().first());
</script>

Event Data

e.container jQuery

The jQuery object that represents the edit form container element.

e.model kendo.data.Model

The model to which the current ListView item is bound.

e.preventDefault Function

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