This is a migrated thread and some comments may be shown as answers.

Limit # of items that can be selected

1 Answer 280 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Roger
Top achievements
Rank 1
Roger asked on 18 Mar 2020, 03:33 PM
Is there a way to limit the number of items that can be selected in a MultiSelect component?

1 Answer, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 19 Mar 2020, 12:13 PM

Hello Roger,

Yes, you can limit the total count of selected items in several ways:

Of course, you can combine the three approaches.

Code snippet for if / else statement:

  • This code snippet will show you how to limit the Count property of the C# List
  • Render the component if the Count is below certain amount
  • Render a custom message / component if the Count is over the predefined amount

 

<h4 class="text-info">Select multiple data</h4>

@if (MySelectedItems.Count < MaximumNumberOfItems)
{
    <TelerikMultiSelect Data="@Options" @bind-Value="@MySelectedItems" />
}
else
{
    <div class="alert alert-danger">You cannot select more items</div>
}

@if (MySelectedItems?.Count > 0)
{
    <ul>
        @foreach (int item in MySelectedItems)
        {
            <li class="text-muted">@item</li>
        }
    </ul>
}

@code {
    int MaximumNumberOfItems = 5;
    List<int> MySelectedItems { get; set; } = new List<int>();
    List<int> Options { get; set; } = Enumerable.Range(1, 20).ToList();
}

 

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor
Tags
MultiSelect
Asked by
Roger
Top achievements
Rank 1
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or