Adding 'Select-All' Checkbox in Grid Footer

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.2.718 version

Description

How can I add a checkbox option in the Telerik UI for ASP.NET MVC Grid footer that allows the user to toggle the selection of all rows? This option is useful when the Grid contains many rows, and the user needs to select or unselect all rows when the Grid is scrolled to the bottom.

Solution

1. Define a Select column in the Grid and add a checkbox element in the column's header and footer by using the ClientHeaderTemplate() / ClientFooterTemplate() options. Ensure that each input has a unique id attribute.

       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("grid")
           .Columns(columns =>
           {
               columns.Select().Width(50)
               .ClientHeaderTemplate("<input tabindex='-1' id='header-check-all' class='k-select-checkbox k-checkbox k-checkbox-md k-rounded-md' data-role='checkbox' aria-label='Select all rows' type='checkbox'/>")
               .ClientFooterTemplate("<input tabindex='-1' id='footer-check-all' class='k-select-checkbox k-checkbox k-checkbox-md k-rounded-md' data-role='checkbox' aria-label='Select all rows' type='checkbox'/>");
               ...
           })
           .PersistSelection()
           ...
       )
   
   

2. Handle the DataBound event of the Grid and subscribe to the change event of each checkbox input.

       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("grid")
           .Events(ev => ev.DataBound("onDataBound"))
           ...
       )
   
   

       function onDataBound(e) {
           let gridInstance = e.sender;
           $(gridInstance.element).find("input#footer-check-all").on("change", function (e) { // Footer checkbox "change" event handler.
               ...
           });
   
           $(gridInstance.element).find("input#header-check-all").on("change", function (e) { // Header checkbox "change" event handler.
               ...
           });
       }
   

3. In the change event handler of the footer checkbox, use the client-side select() and clearSelection() methods to select and unselect the Grid rows.

       function onDataBound(e) {
           let gridInstance = e.sender;
           $(gridInstance.element).find("input#footer-check-all").on("change", function (e) {
               if($(this).is(':checked')) { // If the checkbox is checked
                   let masterRows = $("#grid .k-grid-table .k-master-row"); // Select all Grid rows.
                   gridInstance.select(masterRows);
               } else {
                   gridInstance.clearSelection(); // Clear the selected rows.
               }
           });
   
           $(gridInstance.element).find("input#header-check-all").on("change", function (e) {
               $(gridInstance.element).find("input#footer-check-all").prop('checked', $(this).is(':checked')); // Toggle the footer checkbox based on the header checkbox.
           });
       }
   

For the complete implementation of the suggested approach, refer to the Telerik REPL example on adding 'Select-All' option in the Grid footer.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base