Implement Batch Editing in the Grid with OData

Updated on Nov 18, 2025

Environment

Product	Progress® Kendo UI® Grid for jQuery
Preferred Language	JavaScript

Description

How can I use the batch edit mode of the Kendo UI Grid when binding to oData?

Solution

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

The example is outdated. You can review the jQuery Grid Batch Editing OData-v4 Demo demonstrating how to configure the Grid for odata-v4 and batch editing.

html

    <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/service/v2/core/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/service/v2/core/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/service/v2/odata/Customers/" +
              items[i].CustomerID,
              type: "DELETE"
            });
          }
        }

        $("#grid").kendoGrid({
          dataSource: {
            type: "odata-v4",
            batch: true,
            transport: {
              // Not an official feature, but it's close to being one.
              submit: function(e) {
                var requests = [];

                // 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({
                  // Note that this service doesn't actually support batching.
                  url: "https://demos.telerik.com/service/v2/odata/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/service/v2/odata/Customers",                  
                  data: data,
                  json: "$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

• JavaScript API Reference of the Data Grid