Trigger SaveChanges outside the Grid

Environment

Product Version	2021.3.1109
Product	Telerik UI for ASP.NET Core Grid

Description

How can I save the changes in the Telerik UI for ASP.NET Core Grid by using an outside button?

Solution

1. Add an event handler for the Click event of the external button.
2. Get a reference to the Grid.
3. Use the client-side saveChanges method.

Index.cshtml

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("Grid")
        .Columns(columns => {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(140);
            columns.Bound(p => p.UnitsInStock).Width(140);
            columns.Bound(p => p.Discontinued).Width(100);
            columns.Command(command => command.Destroy()).Width(150);
        })
        .ToolBar(toolbar => {
            toolbar.Create();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .Events(events => events.Sort("onSort"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(20)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.ProductID))
            .Create("Editing_Create", "Grid")
            .Read("Editing_Read", "Grid")
            .Update("Editing_Update", "Grid")
            .Destroy("Editing_Destroy", "Grid")
        )
    )
    @(Html.Kendo().Button()
      .Name("saveBtn")
      .Content("Save changes")
      .Events(e=>e.Click("onClickHandler"))
    )

script.js

    function onClickHandler() {
        var grid = $("#grid").data("kendoGrid");
        grid.saveChanges();
    }

For a runnable example based on the code above, refer to the Telerik REPL project on saving Grid changes through an external button example.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Save Grid Changes through External Button
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base