diff --git a/knowledge-base/multiselect-limit-selection.md b/knowledge-base/multiselect-limit-selection.md new file mode 100644 index 0000000000..8ea67aec4a --- /dev/null +++ b/knowledge-base/multiselect-limit-selection.md @@ -0,0 +1,76 @@ +--- +title: Restrict the Number of Selected Items in the MultiSelect +description: Learn how to restrict the number of selectable items in the Telerik Blazor MultiSelect component. +type: how-to +page_title: How to Restrict the Number of Selected Items in MultiSelect for Blazor +slug: multiselect-kb-limit-selection +tags: multiselect, blazor, selection limit +res_type: kb +ticketid: 1670731 +--- + +## Environment + + + + + + + + +
ProductMultiSelect for Blazor
+ +## Description + +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: +- How to set a selection limit on MultiSelect in Blazor? +- How to prevent additional selections in MultiSelect after reaching a defined limit? +- How to notify users they've reached the maximum number of selectable items in MultiSelect? + +## Solution + +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. + +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. + +````CSHTML + + + +@if (MultiValues.Count == 3) +{ + Maximum selected items reached +} + +@code { + private static List MultiData { get; set; } = new List { + "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Software Architect", "Product Manager" + }; + private List MultiValues { get; set; } = new List() { MultiData[0] }; + + private void OnItemRenderHandler(MultiSelectItemRenderEventArgs args) + { + if (MultiValues.Count == 3 && !MultiValues.Contains(args.Item)) + { + args.Class = "k-disabled"; + } + } + private void OnMultiValueChanged(List newValues) + { + if (newValues.Count <= 3) + { + MultiValues = newValues; + } + } +} +```` + +## See Also + +- [MultiSelect Overview]({%slug multiselect-overview%}) +- [MultiSelect Events]({%slug multiselect-events%})