Prevent Sorting with Checkbox in Header
Environment
| Product | Progress Telerik UI for ASP.NET Core Grid |
| Progress Telerik UI for ASP.NET Core version | Created with the 2022.3.913 version |
Description
My Grid has a header template, which contains a checkbox, for a column. When I click the checkbox, the column gets sorted.
How can I prevent the sorting of the column which uses a header template and has a checkbox in its header of a Telerik UI for ASP.NET Core Grid?
Solution
To integrate a checkbox within a Grid column's header, use the
.ClientHeaderTemplate()configuration option.To allow the selection and deselection of the checkbox only, handle the
clickevent of the checkboxes.- To prevent the sorting of the column upon clicking a checkbox, use the conventional
.stopPropagation()method for the event object.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Width(70);
columns.Bound(p => p.UnitPrice).Width(70);
columns.Bound(p => p.UnitsInStock).Width(70);
columns.Bound(p => p.Discontinued).Width(200).ClientHeaderTemplate("<input type='checkbox' onclick='onClick();'><span> Discontinued</span>").Width(170);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(70);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.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/javascript">
function onClick(){
event.stopPropagation();
// Add custom logic.
}
</script>
For the complete implementation of the suggested approach, refer to this Telerik REPL Example.