Restrict the Number of Selected Items in the MultiSelect

Environment

Product

MultiSelect for Blazor

Description

When using the MultiSelect 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 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.

<TelerikMultiSelect Data="@MultiData"
                    Value="@MultiValues"
                    ValueChanged="@( (List<string> newValues) => OnMultiValueChanged(newValues) )"
                    AutoClose="false"
                    OnItemRender="@OnItemRenderHandler"
                    Width="400px">
</TelerikMultiSelect>

@if (MultiValues.Count == 3)
{
    <span style="color:red;">Maximum  selected items reached</span>
}

@code {
    private static List<string> MultiData { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Software Architect", "Product Manager"
    };
    private List<string> MultiValues { get; set; } = new List<string>() { MultiData[0] };

    private void OnItemRenderHandler(MultiSelectItemRenderEventArgs<string> args)
    {
        if (MultiValues.Count == 3 && !MultiValues.Contains(args.Item))
        {
            args.Class = "k-disabled";
        }
    }
    private void OnMultiValueChanged(List<string> newValues)
    {
        if (newValues.Count <= 3)
        {
            MultiValues = newValues;
        }
    }
}

See Also

• MultiSelect Overview
• MultiSelect Events