Implement Batch Editing in the Grid with OData
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Preferred Language | JavaScript |
Description
How can I use the batch edit mode of the Kendo UI Grid when binding to oData?
Solution
Use a third-party library. To submit the actual request, the following example uses Batch.js library by Pavel Volgarev. For more information, refer to Batch Processing in the oData 3.0 documentation.
The scenario uses an experimental
transport.submitData Source option. It is not yet included as an officially supported API call.
<div id="grid"></div>
<script>
$(document).ready(function () {
// The methods below create an entry in the requests array for the given operation
function queueCreated(requests, items) {
for (var i = 0; i < items.length; i++) {
requests.push({
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers",
type: "POST",
data: items[i]
});
// Assign temporary IDs as placeholders
items[i].ContactID = kendo.guid();
}
}
function queueUpdated(requests, items) {
for (var i = 0; i < items.length; i++) {
requests.push({
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers/" +
items[i].CustomerID,
type: "PUT",
data: items[i]
});
}
}
function queueDestroyed(requests, items) {
for (var i = 0; i < items.length; i++) {
requests.push({
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers/" +
items[i].CustomerID,
type: "DELETE"
});
}
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
batch: true,
transport: {
// Not an official feature, but it's close to being one.
submit: function(e) {
var requests = [];
// Get all batched operations in e.data.
queueCreated(requests, e.data.created);
queueUpdated(requests, e.data.updated);
queueDestroyed(requests, e.data.destroyed);
// Check out the network tab on "Save Changes".
$.ajaxBatch({
// Note that this service doesn't actually support batching.
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Batch",
data: requests
})
.done(function() {
e.success(e.data.created, "create");
e.success([], "update");
e.success([], "destroy");
})
.fail(function() {
e.error({});
});
},
read: function(e) {
var data = kendo.data.transports.odata.parameterMap(e.data, "read");
$.ajax({
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers",
dataType: "jsonp",
data: data,
jsonp: "$callback"
})
.done(e.success)
.fail(e.error);
}
},
schema: {
model: {
id: "CustomerID",
fields: {
"ContactName": { type: "string" }
}
}
},
pageSize: 20
},
height: 550,
editable: "incell",
toolbar: ["save", "create"],
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}, {
command: ["destroy"]
}]
});
});
</script>