Add SelectAll button to select all visible dropdown items when clicked
Environment
Product | RadMultiSelect for ASP.NET AJAX |
Description
Right now the users have to select one at a time and it is time-consuming. The solution provides the ability to select all dropdown entries in the multi-select popup.
Solution
Add a SelectAll button element in the HeaderTemplate of RadMultiSelect for ASP.NET AJAX. In the click event of the button, call the SelectAllItems function that will select all visible dropdown items, e.g.
<script>
function SelectAllItems() {
var multiSelect = $find("<%=requiredMultiSelect.ClientID%>");
var items = multiSelect.get_items();
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.click(); //click to select all visible dropdown items
}
}
</script>
<telerik:RadMultiSelect runat="server" DataValueField="text" Filter="Contains" AutoClose="false" EnforceMinLength="false" Placeholder="Select attendees..."
DataTextField="text" Width="500px" ID="requiredMultiSelect">
<HeaderTemplate>
<div>
<button type="button" onclick="SelectAllItems()">Select All</button>
</div>
</HeaderTemplate>
<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>