Adding a Select All Option to RadMultiSelect
Environment
| Product | RadMultiSelect for ASP.NET AJAX |
Description
I want to add a "Select All" option to RadMultiSelect.
This knowledge base article also answers the following questions:
- How do I implement a Select All feature for RadMultiSelect?
- What client-side API can be used to manage RadMultiSelect selections?
- Is there a way to toggle between selecting all items and deselecting all in RadMultiSelect?
Solution
To add a Select All / Unselect All functionality to RadMultiSelect, utilize an external element (for example, a button) along with the client-side API of the MultiSelect. Follow the steps below to implement this behavior:
First, define RadMultiSelect using the desired options and items. Additionally, add a RadButton that will serve as the trigger for selecting or deselecting all items.
<telerik:RadMultiSelect runat="server" ID="RadMultiSelect2" DataTextField="text" DataValueField="value" Width="500px">
<Items>
<telerik:MultiSelectItem Value="Person1" Text="Steven White"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Value="Person2" Text="Nancy King"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Value="Person3" Text="Nancy Davolio"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Value="Person4" Text="Robert Davolio"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Value="Person5" Text="Michael Leverling"></telerik:MultiSelectItem>
</Items>
</telerik:RadMultiSelect>
<telerik:RadButton runat="server" ID="RadButton1" Text="Select All/Unselect All" AutoPostBack="false" OnClientClicked="onClientClicked" />After that, write a JavaScript function that toggles the selection of all items in RadMultiSelect. This function is triggered by the client-side OnClientClicked event of the RadButton.
function onClientClicked(sender, args) {
let multiSelect = $find("<%= RadMultiSelect2.ClientID %>");
let length = multiSelect.get_value().length;
if (length === 0) {
let values = multiSelect.get_itemsData().map(dataItem => dataItem.value);
multiSelect.set_value(values);
}
else {
multiSelect.set_value([]);
}
}This script checks if any items are currently selected in the RadMultiSelect. If none are selected, it selects all items. If any item is selected, it clears the selection, effectively acting as a toggle between select all and deselect all states.
For more advanced scenarios, consider accessing the underlying Kendo MultiSelect widget for additional functionalities not directly exposed by RadMultiSelect.