This recipe demonstrates how to allow the user to make inline edits in the 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 14 - Inline 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: "inline",
toolbar: [ { name: "create", text: "Add Product" } ],
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: ["edit", "destroy"], title: " ", width: 200 }]
});
});
</script>
<div id="myGrid"></div>
</body>
</html>In this recipe, only the datasource differs from the previous example. Here we set the value of editable to inline rather than just true. We also removed the save and cancel button values from the toolbar; as you can see, they are not needed. With inline editing enabled, the user is restricted to editing one row at a time.