Skip to content

Commit 69cdc53

Browse files
author
KB Bot
committed
Added new kb article multiselect-limit-selection
1 parent 5492018 commit 69cdc53

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Restrict the Number of Selected Items in the MultiSelect
3+
description: Learn how to restrict the number of selectable items in the Telerik Blazor MultiSelect component.
4+
type: how-to
5+
page_title: How to Restrict the Number of Selected Items in MultiSelect for Blazor
6+
slug: multiselect-kb-limit-selection
7+
tags: multiselect, blazor, selection limit
8+
res_type: kb
9+
ticketid: 1670731
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>MultiSelect for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
When using the [MultiSelect]({%slug multiselect-overview%}) component, it might be necessary to limit the number of items a user can select. For example, restricting selection to a maximum of three items. This KB article also answers the following questions:
26+
- How to set a selection limit on MultiSelect in Blazor?
27+
- How to prevent additional selections in MultiSelect after reaching a defined limit?
28+
- How to notify users they've reached the maximum number of selectable items in MultiSelect?
29+
30+
## Solution
31+
32+
To restrict the number of selectable items in a MultiSelect component, use one-way binding with the `Value` parameter and the `ValueChanged`({%slug multiselect-events%}#valuechanged) event. This approach allows you to manually update the selected items collection and enforce a maximum selection limit.
33+
34+
Below is a demonstration of how to implement a selection limit. This example restricts the user to a maximum of three selections and informs them when they have reached this limit.
35+
36+
````RAZOR
37+
@if (MultiValues.Count == 3)
38+
{
39+
<p style="color:red;">You've reached the maximum selected count</p>
40+
}
41+
42+
<TelerikMultiSelect Data="@MultiData"
43+
Value="@MultiValues"
44+
ValueChanged="@( (List<string> newValues) => OnMultiValueChanged(newValues) )">
45+
</TelerikMultiSelect>
46+
47+
@code {
48+
private List<string> MultiData { get; set; } = new List<string> {
49+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer"
50+
};
51+
52+
private List<string> MultiValues { get; set; } = new List<string>() { "Developer" };
53+
54+
private void OnMultiValueChanged(List<string> newValues)
55+
{
56+
if (newValues.Count <= 3)
57+
{
58+
MultiValues = newValues;
59+
}
60+
}
61+
}
62+
````
63+
64+
## See Also
65+
66+
- [MultiSelect Overview]({%slug multiselect-overview%})
67+
- [MultiSelect Events]({%slug multiselect-events%})

0 commit comments

Comments
 (0)