Placing Edit or Update Buttons to Grid Toolbar
Environment
| Product | Telerik UI for ASP.NET Core Grid |
| Progress Telerik UI for ASP.NET Core 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 Core 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"))
)
)
<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>
<kendo-grid name="grid" height="430">
<selectable mode="single"/>
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
<schema data="Data" total="Total">
<model id="ProductID">
<fields>
<field name="ProductID" type="number" editable="false"></field>
<field name="ProductName" type="string"></field>
<field name="UnitPrice" type="number"></field>
<field name="UnitsInStock" type="number"></field>
<field name="Discontinued" type="boolean"></field>
</fields>
</model>
</schema>
<transport>
<read url="@Url.Action("EditingInline_Read", "Grid")"/>
<update url="@Url.Action("EditingInline_Update", "Grid")"/>
<create url="@Url.Action("EditingInline_Create", "Grid")"/>
<destroy url="@Url.Action("EditingInline_Destroy", "Grid")"/>
</transport>
</datasource>
<toolbar client-template-id="template">
</toolbar>
<columns>
<column field="ProductName"/>
<column field="UnitPrice" width="100"/>
<column field="UnitsInStock" width="100"/>
<column field="Discontinued" width="100"/>
</columns>
<editable mode="inline"/>
<pageable enabled="true"/>
<sortable enabled="true"/>
<scrollable enabled="true"/>
</kendo-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 examples :
More ASP.NET Core Grid Resources
See Also
Telerik REPL: Placing Edit or Update Buttons to Grid Toolbar (HtmlHelper)
Telerik REPL: Placing Edit or Update Buttons to Grid Toolbar (TagHelper)
Server-Side TagHelper API Reference of the Grid for ASP.NET Core
- Client-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