edit
Fires when the ListView enters edit mode.
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>
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
</div>
</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" }
}
}
}
},
edit: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Editing of item with id " + e.model.id);
}
});
</script>
To set after initialization
<script type="text/x-kendo-tmpl" id="template">
<div> #:name#
<div>
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
</div>
</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 edit event
listView.bind("edit", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Editing of item with id " + e.model.id);
});
</script>
Event Data
e.item jQuery
The jQuery element to be edited.
e.model kendo.data.Model
The model to be edited.