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