Select All
The Telerik UI MultiSelect for ASP.NET MVC provides a built-in Select All feature that renders a sticky header at the top of the dropdown list. Clicking the header selects or deselects all items. When combined with the Checkboxes option, the header displays a checkbox that reflects the aggregate selection state—unchecked (none selected), indeterminate (some selected), or checked (all selected).
Basic Configuration
To enable the Select All header, call the SelectAll() method. The following example also enables checkboxes and filtering:
@(Html.Kendo().MultiSelect()
.Name("products")
.Placeholder("Select products...")
.SelectAll()
.Checkboxes()
.Filter(FilterType.Contains)
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SelectAll_GetProducts", "MultiSelect");
});
})
)okay no
Select All with Filtering
When filtering is active, clicking the Select All header selects all items from the data source—not only the visible subset. After the selection completes, the filter is cleared.
@(Html.Kendo().MultiSelect()
.Name("products")
.Placeholder("Filter and select all matching...")
.SelectAll()
.Checkboxes()
.Filter(FilterType.Contains)
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SelectAll_GetProducts", "MultiSelect");
});
})
.Value(new[] { 1, 2, 3 })
)Customizing the Select All Label
To change the text displayed in the sticky header, use the Messages.SelectAll option.
@(Html.Kendo().MultiSelect()
.Name("products")
.SelectAll()
.Checkboxes()
.Messages(m => m.SelectAll("Check All Items"))
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SelectAll_GetProducts", "MultiSelect");
});
})
)Handling the SelectAllChange Event
The SelectAllChange event fires when the user clicks the Select All header. The event is preventable—calling e.preventDefault() cancels the built-in selection logic so you can implement custom behavior.
@(Html.Kendo().MultiSelect()
.Name("products")
.SelectAll()
.Checkboxes()
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SelectAll_GetProducts", "MultiSelect");
});
})
.Events(e => e.SelectAllChange("onSelectAllChange"))
)
<script>
function onSelectAllChange(e) {
if (e.checked) {
console.log("Selecting all items");
} else {
console.log("Deselecting all items");
}
}
</script>