Edit this page

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) {
                console.log("Cancelled editing of item with id " + e.model.id);
    }
  });
  var listView = $("#listView").data("kendoListView");
  listView.edit(listView.element.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) {
    console.log("Cancelled editing of item with id " + e.model.id);
  });
  listView.edit(listView.element.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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy