New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Prevent Sorting with Checkbox in Header

Environment

Product Progress Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC 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 MVC Grid?

Solution

  1. To integrate a checkbox within a Grid column's header, use the .ClientHeaderColumnTemplate() configuration option.

  2. To allow the selection and deselection of the checkbox only, handle the click event of the checkboxes.

  3. 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>&nbsp; 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.

More ASP.NET MVC Grid Resources

See Also

In this article