Hello, I have 3 queries.
1. I would like set values in multiselect dropdown programmatically when a certain button is clicked.
2. I want to be able to get a list of all the values currently selected.
3.On first render I would like to have 2 of 4 fields selected.
Hi Pavel,
You can bind the preselect, dynamic values by using the below code example to the multiselect component. Also, you can get the selected values using two-way binding variable values.
Find the code example here:
|
@*get the selected value using two-way binding variable*@ @foreach (var _gamesValue in _gamesValues) { <p>MultiSelect value is:<strong>@_gamesValue</strong></p> }
<SfMultiSelect TValue="List<string>" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" @bind-Value="@_gamesValues"> <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings> </SfMultiSelect>
<button @onclick="@UpdateValue">update the Value</button>
@code {
private List<string> ValidationErrors { get; set; } = new(); //preselect the value private List<string> _gamesValues { get; set; } = new List<string> { "Game1", "Game4" };
public class Games { public string ID { get; set; } public string Text { get; set; } } List<Games> LocalData = new List<Games> { new Games() { ID= "Game1", Text= "American Football" }, new Games() { ID= "Game2", Text= "Badminton" }, new Games() { ID= "Game3", Text= "Basketball" }, new Games() { ID= "Game4", Text= "Cricket" }, new Games() { ID= "Game5", Text= "Football" }, new Games() { ID= "Game6", Text= "Golf" }, new Games() { ID= "Game7", Text= "Hockey" }, new Games() { ID= "Game8", Text= "Rugby"}, new Games() { ID= "Game9", Text= "Snooker" }, new Games() { ID= "Game10", Text= "Tennis"}, };
void UpdateValue() { //Dynamically update the value this._gamesValues = new List<string> { "Game7", "Game8" }; }
} |
Find the sample in the attachment:
Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Regards,
Sureshkumar P
