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

Trigger SaveChanges outside the Grid

Environment

Product Version2021.3.1109
ProductTelerik UI for ASP.NET MVC Grid

Description

How can I save the changes in the Telerik UI for ASP.NET MVC 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"))
    )

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 MVC Grid Resources

See Also