Edit this page

Implement Batch Editing with oData

By default, the Grid does not support batch editing when binding to oData.

To achieve this behavior, use a third-party library. To submit the actual request, the following example uses Batch.js by Pavel Volgarev. For more information, refer to Batch Processing in the oData 3.0 documentation.

Important

The scenario uses an experimental transport.submit Data Source option. It is not yet included as an officially supported API call.

Example
    <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 = [];

                // We 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({
                  // Not 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>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy