New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Save All Pending Changes in Grid through a Single Request
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.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:
-
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. )
-
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
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums