New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Save All Pending Changes in Grid through a Single Request

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

How can I save all pending changes in an InCell editable Grid through a single request to the server?

Solution

The solution relies on the following key steps:

  1. Create an InCell editable Grid:

    Razor
    @(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditSyncChangesWithOneRequest.Models.Order>()
        .Name("Grid")
        .ToolBar(toolBar => toolBar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Model(model => {
                model.Id(p => p.OrderID);
                model.Field(p => p.OrderID).Editable(false);
            })
            .Create(create => create.Action("Create", "Home"))
            .Destroy(destroy => destroy.Action("Delete", "Home"))
            .Read(read => read.Action("Read", "Home"))
            .Update(update => update.Action("Update", "Home"))
        )
        ... // Additional configuration.
    )
  2. Add an external button that will submit all current Grid changes by triggering an Ajax request to the server:

    JS
    <button onclick="sendData()">Save Changes</button>
    
    <script>
        function sendData() {
            var grid = $("#Grid").data("kendoGrid"),
                parameterMap = grid.dataSource.transport.parameterMap;
    
            // Get the new and the updated records.
            var currentData = grid.dataSource.data();
            var updatedRecords = [];
            var newRecords = [];
    
            for (var i = 0; i < currentData.length; i++) {
                if (currentData[i].isNew()) {
                    // A new record.
                    newRecords.push(currentData[i].toJSON());
                } else if (currentData[i].dirty) {
                    updatedRecords.push(currentData[i].toJSON());
                }
            }
    
            // Deleted records.
            var deletedRecords = [];
            for (var i = 0; i < grid.dataSource._destroyed.length; i++) {
                deletedRecords.push(grid.dataSource._destroyed[i].toJSON());
            }
    
            var data = {};
            $.extend(data, parameterMap({ updated: updatedRecords }), parameterMap({ deleted: deletedRecords }), parameterMap({ new: newRecords }));
    
            $.ajax({
                url: "@Url.Action( "UpdateCreateDelete", "Home")",
                data: data,
                type: "POST",
                success: function () {
                    alert("update on server is completed");
                    grid.dataSource._destroyed = [];
                    // Refresh the grid (optional)
                    grid.dataSource.read();
                }
            });
        }
    </script>

To review the complete example, refer to the project on how to save all changes in a Telerik UI Grid using a single request to the server in ASP.NET MVC applications.

More ASP.NET MVC Grid Resources

See Also