This recipe demonstrates how to allow the user to make batch edits in a grid.
Copy the following code into your new document:
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 13- Batch Editing</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function () {
var serviceURL = "http://demos.kendoui.com/service";
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
url: serviceURL + "/Products",
dataType: "jsonp"
},
update: {
url: serviceURL + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: serviceURL + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: serviceURL + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
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 } }
}
}
}
});
$("#myGrid").kendoGrid({
dataSource: myDataSource,
navigatable: true,
pageable: true,
editable: true,
toolbar: [ { name: "create", text: "Add Product" } , "save", "cancel"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", template: '#= kendo.toString(UnitPrice,"c") #' },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued" },
{ command: "destroy", title: " ", width: 120 }]
});
});
</script>
<div id="myGrid"></div>
</body>
</html>There are a couple of things to pay attention to in this recipe. First, we have defined four distinct transport calls in our datasource. Obviously, each of these represents our CRUD functions. Depending on the command that the user performs, Kendo will fire one of the four transport operations.
There is some magic going on in lines 34-38, where Kendo appends all of the proposed changes by the user in the URL via the models argument. On the server side, you'll want to perform some kind of URL decode of the data coming from the client. Another thing to remember when working with batch data is that you are getting back a list of arrays, so you'll need to loop through all of them to make sure you properly update all of the data that the user has submitted.
We also introduced validation in the datasource schema. So, instead of just identifying the type of each column, we can also specify min, max, nullable, required, and other types of validation. You'll notice in the grid column definition that we included a command column that allows the user to request a row of data to be deleted.
Lastly, it's worth noting that we added a parameter called batch to our datasource and a parameter called editable to our grid. Both of these parameters need to be included, because the default is false.