@using Syncfusion.Blazor.DropDowns
@inject IJSRuntime JSRuntime
<div style="margin:130px auto;width:300px">
<SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games" EnableChangeOnBlur="false">
<MultiSelectEvents TItem="GameFields" TValue="string[]" ValueChange="@ValueChangeHandler" Blur="@BlurHandler"></MultiSelectEvents>
<MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>
</div>
@code {
public int ItemCount { get; set; }
public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<GameFields> Games = new List<GameFields>() {
new GameFields(){ ID= "Game1", Text= "American Football" },
new GameFields(){ ID= "Game2", Text= "Badminton" },
new GameFields(){ ID= "Game3", Text= "Basketball" },
new GameFields(){ ID= "Game4", Text= "Cricket" },
};
private async Task ValueChangeHandler(MultiSelectChangeEventArgs<string[]> args)
{
ItemCount =
args.Value.Count();
}
private async Task BlurHandler(Object args)
{ await
JSRuntime.InvokeAsync<object>("updateValue", ItemCount);
}
}
|