Pre-Selecting Items
This article provides an example that demonstrates how to pre-select items for the end-user. The described approach allows you to pre-select a single item or a set of items if they exist in the data source.
Pre-select items for the user
@* You can pre-select an item or set of items only if they exist in the data source. *@
<div>
<TelerikButton OnClick="@SelectHandler">Pre-select countries</TelerikButton>
<TelerikButton OnClick="@ClearSelectionHandler">Clear selection</TelerikButton>
</div>
<TelerikMultiSelect Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
Width="350px" ClearButton="true" />
@if (Values.Count > 0)
{
<ul>
@foreach (var item in Values)
{
<li>@item</li>
}
</ul>
}
@code {
List<string> Countries { get; set; } = new List<string>();
List<string> Values { get; set; } = new List<string>();
void SelectHandler()
{
List<string> PreselectedValues = new List<string>()
{
"Bulgaria", "Croatia"
};
// create a new reference so that the framework can notify the component to update
Values = new List<string>(PreselectedValues);
}
void ClearSelectionHandler()
{
Values = new List<string>();
}
protected override void OnInitialized()
{
Countries.Add("Albania");
Countries.Add("Bosnia & Herzegovina");
Countries.Add("Bulgaria");
Countries.Add("Croatia");
Countries.Add("Kosovo");
Countries.Add("North Macedonia");
Countries.Add("Montenegro");
Countries.Add("Serbia");
Countries.Add("Slovenia");
// you can also pre-select items here based on data you fetch, not just on a button click
base.OnInitialized();
}
}