remove
Fires before the list view item is put in edit mode. If the event is not prevented, the ListView will call the DataSource sync method.
The event handler function context (available via the this
keyword) will be set to the widget instance.
Example
<div id="listview"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="item">
<p>#: name # || #: age #</p>
<div class="edit-buttons">
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#">#= kendo.ui.icon({ icon: 'x' }) #</a>
</div>
</div>
</script>
<script>
$("#listview").kendoListView({
dataSource: {
data:[
{ id: 1, name: "Jane Doe", age: 30},
{ id: 2, name: "John Doe", age: 33}
],
schema: {
model: { id: "id" }
}
},
template: kendo.template($("#template").html()),
remove: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Item with id "+ e.model.id + " deleted.");
}
});
</script>
To set after initialization
<div id="listview"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="item">
<p>#: name # || #: age #</p>
<div class="edit-buttons">
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>
</div>
</div>
</script>
<script>
$("#listview").kendoListView({
dataSource: {
data:[
{ id: 1, name: "Jane Doe", age: 30},
{ id: 2, name: "John Doe", age: 33}
],
schema: {
model: { id: "id" }
}
},
template: kendo.template($("#template").html())
});
var listView = $("#listview").data("kendoListView");
listView.bind("remove", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Item with id "+ e.model.id + " deleted.");
});
</script>
Event Data
e.item jQuery
The item element to be deleted.
e.model kendo.data.Model
The model to be deleted.