Adding 'Select-All' Checkbox in Grid Footer
Environment
Product | Telerik UI for ASP.NET Core Grid |
Progress Telerik UI for ASP.NET Core version | Created with the 2023.2.718 version |
Description
How can I add a checkbox option in the Telerik UI for ASP.NET Core 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
-
Define a
Select
column in the Grid and add acheckbox
element in the column's header and footer by using theClientHeaderTemplate()
/ClientFooterTemplate()
options. Ensure that each input has a uniqueid
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() ... )
@addTagHelper *, Kendo.Mvc <kendo-grid name="grid" persist-selection="true"> <columns> <column selectable="true" width="50" header-template="<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'/>" footer-template="<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'/>"> </column> ... </columns> ... </kendo-grid>
-
Handle the
DataBound
event of the Grid and subscribe to thechange
event of each checkbox input.@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>() .Name("grid") .Events(ev => ev.DataBound("onDataBound")) ... )
@addTagHelper *, Kendo.Mvc <kendo-grid name="grid" persist-selection="true" on-data-bound="onDataBound"> ... </kendo-grid>
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. ... }); }
-
In the
change
event handler of the footer checkbox, use the client-sideselect()
andclearSelection()
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.