Adding a "Select All" Checkbox to RadMultiSelect dropdown header

Description

I want to add a "Select All" checkbox in the MultiSelect component to allow users to select or deselect all items in the dropdown. Utilizing the headerTemplate configuration enables rendering a checkbox at the top of the dropdown list, facilitating the selection or deselection of all items through user interaction.

This knowledge base article also answers the following questions:

• How to implement a "Select All" feature in MultiSelect?
• How to customize the header of the MultiSelect popup?
• How to manage multiple selections in MultiSelect through a single checkbox?

Environment

Product

RadAjax for ASP.NET AJAX

Solution

To add a "Select All" checkbox in the RadMultiSelect component, utilize the HeaderTemplate configuration. This template renders a checkbox at the top of the dropdown list, allowing users to select or deselect all items with a single interaction.

Here is how to implement the "Select All" checkbox feature in the RadMultiSelect component:

1. Define the RadMultiSelect component with the required settings and data fields. Include the HeaderTemplate that contains the "Select All" checkbox.

ASPX

        <telerik:RadMultiSelect runat="server" Width="100%" ID="RadMultiSelect1"
            DataTextField="text"
            DataValueField="text"
            DropDownHeight="400"
            CssClass="customers-wrapper"
            Placeholder="Select attendees...">
            <Items>
                <telerik:MultiSelectItem Text="Steven White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Callahan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Peacock"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Fuller"></telerik:MultiSelectItem>
            </Items>
            <HeaderTemplate>
                <div style="padding:4px 8px">
                    <input type="checkbox" id="selectAll" /> Select All
                </div>
            </HeaderTemplate>
            <ClientEvents OnLoad="OnLoad" />
        </telerik:RadMultiSelect>

2. Implement the JavaScript functions to handle the "Select All" and "Deselect All" actions. Attach these functions to the "Select All" checkbox within the OnLoad client-side event.

javascript

<script type="text/javascript">
    function OnLoad(sender, args) {
        // Attach the Select All logic to the checkbox
        var selectAllCheckbox = document.getElementById("selectAll");
        selectAllCheckbox.addEventListener("change", function () {
            var multiSelect = $find("<%= RadMultiSelect1.ClientID %>");
            if (this.checked) {
                selectAllItems(multiSelect);
            } else {
                deselectAllItems(multiSelect);
            }
        });
    }

    function selectAllItems(multiSelect) {
        var $ = $telerik.$;
        var values = $.map(multiSelect.get_itemsData(), function (dataItem) {
            return dataItem.text; // Use the 'text' field from itemsData
        });
        multiSelect.set_value(values); // Select all items
    }

    function deselectAllItems(multiSelect) {
        multiSelect.set_value([]); // Deselect all items
    }
</script>

By following these steps, you can easily add a "Select All" checkbox to the RadMultiSelect component, enhancing user interaction and selection efficiency within your ASP.NET AJAX applications.

See Also

• RadMultiSelect Overview
• Client-Side Programming Overview