Inline editing (Advanced)

This recipe demonstrates how to allow the user to make inline edits in the grid.

Getting ready

Open 14-inlineedit.html in your editor or create a new document.

How to do it...

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: "&nbsp;", width: 200 }]
   });
});
</script>
<div id="myGrid"></div>
</body>
</html>

How it works...

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset