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="EB9781849699136_3.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.