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
- Add an event handler for the
Clickevent of the external button. - Get a
referenceto the Grid. - Use the client-side
saveChangesmethod.
@(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.