How to override default update event in KendoGrid inline edit mode
13,334
Depending on when exactly you want to intercept the event.
I would recommend you using save
event. This event is fired when you a record is going to be saved and before exiting inline
edition mode.
The definition would be something like (note that Save
is defined in the Events
section of the Grid
definition):
@(Html.Kendo().Grid(Model).DataSource(dataSource => ...)
.Columns(columns => ...)
.Editable(editing => ...)
.Events(events => events.DataBound("onGridDataBound")
.Save("onGridSave")
.Edit("onGridEdit")
.Change("onGridChange")
)
)
The following code snippet shows the save
event (using JavaScript)
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
save: function(e) {
alert("Saving");
}
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="grid"></div>
Author by
Damith
I have been following my Brothers’ footsteps into my life. I respect my family more than My Life
Updated on June 28, 2022Comments
-
Damith almost 2 years
Is there a any way to capture update event which dynamically generate in inline edit mode. I tried with edit and cancel commands and it worked successfully. I went through this example and it worked with cancel command. Any help would be greatly appreciated.
-
Tannya over 4 yearsThanks. Your answer made my day!