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

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.
    @(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"))
    )
    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

See Also

In this article