New to Telerik UI for ASP.NET Core? Download free 30-day trial

Saving Changes in All Grids

Environment

Product Progress Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version Created with the 2023.1.314 version

Description

How can I consolidate the save operations of all the Telerik UI for ASP.NET Core Grids through an external Save button?

Solution

To achieve the desired scenario:

  1. Create an external Save Button and subscribe to its Click event.
  2. Within the Click handler, loop through all utilized Grids by accessing them through the .k-grid class and save the changes by using the saveChanges() method.
    @(Html.Kendo().Button()
      .Name("saveBtn")
      .Content("Save changes")
      .Events(e=>e.Click("onClickHandler"))
    )

    <h1>Grid #1</h1>
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid1")
        .Columns(columns => {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(140);
            columns.Command(command => command.Destroy()).Width(150);
        })
        .ToolBar(toolbar => {
            toolbar.Create();
        })
        .Scrollable()
        .Height(200)
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(20)
            .ServerOperation(false)
            .Model(model => model.Id(p => p.ProductID))
            .Create("Editing_Create", "Grid")
            .Read("Editing_Read", "Grid")
            .Update("Editing_Update", "Grid")
            .Destroy("Editing_Destroy", "Grid")
        )
    )

    <h1>Grid #2</h1>
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid2")
        .Columns(columns => {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(140);
            columns.Command(command => command.Destroy()).Width(150);
        })
        .ToolBar(toolbar => {
            toolbar.Create();
        })
        .Height(200)
        .Scrollable()
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(20)
            .ServerOperation(false)
            .Model(model => model.Id(p => p.ProductID))
            .Create("Editing_Create", "Grid")
            .Read("Editing_Read", "Grid")
            .Update("Editing_Update", "Grid")
            .Destroy("Editing_Destroy", "Grid")
        )
    )
    <script type="text/javascript">
            function onClickHandler(e){
                $(".k-grid").each(function (index, value) {
                     var grid = $(this).data("kendoGrid"); // Get the reference of the current Grid widget instance.
                     grid.saveChanges(); // Save the changes for the current Grid widget instance.
                });
            }
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on saving all changes in Grids.

More ASP.NET Core Grid Resources

See Also

In this article