Placing Edit or Update Buttons to Grid Toolbar
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.3.1114 version |
Description
How can I limit the number of columns in the Grid and move the Edit and Update buttons to the toolbar to save space when using the Telerik UI for ASP.NET MVC Grid?
Solution
To achieve the desired result:
- Enable selection for the Grid.
- Define a toolbar template that will hold all custom buttons used for editing.
- Handle the click event for the buttons to enter/exit edit mode.
<script type="text/x-kendo-template" id="template"> // ToolBar Template
<div class="editBtnContainer">
<button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-custom">Edit</button>
</div>
<div class="updateCancelContainer">
<a role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-save-command" href="\\#">
<span class="k-icon k-i-check k-button-icon"></span>Update</a>
<a role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-cancel-command" href="\\#">
<span class="k-icon k-i-cancel k-button-icon"></span>Cancel</a>
</div>
</script>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(100);
columns.Bound(p => p.UnitsInStock).Width(100);
columns.Bound(p => p.Discontinued).Width(100);
})
.ToolBar(toolbar => toolbar.ClientTemplateId("template"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
$(document).ready(function(){
$(".k-grid-custom.k-button").on("click", function (e) {
e.preventDefault();
var grid = $("#grid").getKendoGrid();
var selectedRow = grid.select()[0];
if (selectedRow) {
grid.editRow(selectedRow);
$(".editBtnContainer, .updateCancelContainer").toggle();
}
});
$(".k-grid-save-command").on("click", function (e) {
e.preventDefault();
var grid = $("#grid").getKendoGrid();
grid.dataSource.sync();
$(".editBtnContainer, .updateCancelContainer").toggle();
});
$(".k-grid-cancel-command").on("click", function (e) {
e.preventDefault();
var grid = $("#grid").getKendoGrid();
grid.cancelChanges();
$(".editBtnContainer, .updateCancelContainer").toggle();
});
})
.updateCancelContainer {
display: none;
}
For a complete implementation of the suggested approach, refer to the following Telerik REPL example :