RadMultiSelect Select All

[Bernie]

How do I had a "Select All" option to a RadMultiSelect? I've see a couple of pages showing is but I can't find it in the docs or examples.

Thanks for any help.

 

[Rumen]

Hi Bernie,

You can achieve the desired Select All / Unselect All behavior with an external element on the page (e.g. a Button) and with the help of the client-side API of the MultiSelect, see RadMultiSelect Object.

For instance:

        <telerik:RadMultiSelect runat="server" DataValueField="text" Filter="Contains" EnforceMinLength="false" Placeholder="Select attendees..."
            DataTextField="text" Width="500px" ID="RadMultiSelect1">
            <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>
                <telerik:MultiSelectItem Text="Janet White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Margaret Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nige Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Fuller"></telerik:MultiSelectItem>
            </Items>
        </telerik:RadMultiSelect>

        <telerik:RadButton runat="server" ID="RadButton1" Text="Select/Deselect All" AutoPostBack="false" OnClientClicked="OnClientClicked" />

        <script>
            function OnClientClicked(sender, args) {
                var multiSelect = $find("<%= RadMultiSelect1.ClientID %>");
                var values;
                var $ = $telerik.$;
                if (multiSelect.get_value().length == 0) {
                    values = $.map(multiSelect.get_itemsData(), function (dataItem) {
                        return dataItem.text;
                    });
                }
                else {
                    values = [];
                }
                multiSelect.set_value(values);
            }
        </script

One more option is to get a reference to the underlying Kendo MultiSlect widget beneath the MultiSelect follow the approach suggested here - Kendo MultiSelect | Select or Deselect All MultiSelect Items.

Regards,
Rumen
Progress Telerik

[Bernie]

Rumen,

Thank you for the reply.

I'm using AJAX so the Kendo solution is out. So you are saying there is no built in solution for select all even though there is a built in solution for unselect all?

I'm trying to find the example I saw with a clickable icon inside the RMS.

 

Bernie

 

[Rumen]

Thank you for the clarification, Bernie!

You likely came across this how-to article on adding a Kendo UI MultiSelect Adding "Select All" CheckBox the HeaderTemplate of MultiSelect. This approach can also be applied to the RadMultiSelect (the server-side wrapper for Kendo MultiSelect) with the following adjustments::

        <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>

        <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>

 

Regards,
Rumen
Progress Telerik

[Rumen]

There is another KB for this functionality for RadMultiSelect for ASP.NET AJAX: https://www.telerik.com/products/aspnet-ajax/documentation/knowledge-base/multiselect-select-all-entries-via-selectall-button.