|
@using Syncfusion.Blazor.DropDowns
@using System.Runtime.InteropServices
@inject
IJSRuntime JSRuntime
<SfMultiSelect ID="multi1" TValue="List<string>" TItem="Country" CssClass="sample1" Placeholder="Countries" EnableChangeOnBlur="false" @bind-Value="@MultiVal"
DataSource="@Countries" Mode="@VisualMode.CheckBox" ShowClearButton="true" AllowFiltering="false" PopupHeight="700px" PopupWidth="400px" Width="200px">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="List<string>" TItem="Country" Blur="BlurHandler" ValueChange="@ValueChanged" Created="@CreatedHandler1"></MultiSelectEvents>
</SfMultiSelect>
<hr />
<SfMultiSelect ID="multi2" TValue="List<string>" TItem="Country" CssClass="sample2" Placeholder="Countries" EnableChangeOnBlur="false" @bind-Value="@MultiVal2"
DataSource="@Countries" Mode="@VisualMode.CheckBox" ShowClearButton="true" AllowFiltering="false" PopupHeight="700px" PopupWidth="400px" Width="200px">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="List<string>" TItem="Country" Blur="BlurHandler2" ValueChange="@ValueChanged2" Created="@CreatedHandler2"></MultiSelectEvents>
</SfMultiSelect>
@code
{
private const string FILTER_DEFAULT_CSS_CLASS = "defaultClass";
private const string VALUE_IS_PRESENT_CSS_CLASS = "selectedClass";
public List<string> MultiVal { get; set;
} = new List<string>() { };
public List<string> MultiVal2 { get; set;
} = new List<string>() { };
public int
multi1_SelectedItem;
public int
multi2_SelectedItem;
protected override void OnInitialized()
{
MultiVal = new List<string>() { "AU", "CA" };
}
private void
CreatedHandler1(Object args)
{
ValueChanged(new MultiSelectChangeEventArgs<List<string>> { Value = MultiVal });
}
private void
CreatedHandler2(Object args)
{
ValueChanged2(new MultiSelectChangeEventArgs<List<string>> { Value = MultiVal2 });
}
private async Task BlurHandler(Object args)
{
await JSRuntime.InvokeAsync<object>("ChnageText", multi1_SelectedItem);
}
private async Task ValueChanged(MultiSelectChangeEventArgs<List<string>> arg)
{
multi1_SelectedItem = (arg.Value == null) ? 0 : arg.Value.Count;
await JSRuntime.InvokeAsync<object>("ChnageText", multi1_SelectedItem);
}
private async Task ValueChanged2(MultiSelectChangeEventArgs<List<string>> arg)
{
multi2_SelectedItem = (arg.Value == null) ? 0 : arg.Value.Count;
await JSRuntime.InvokeAsync<object>("ChangeText2", multi2_SelectedItem);
}
private async Task BlurHandler2()
{
await JSRuntime.InvokeAsync<object>("ChangeText2", multi2_SelectedItem);
}
}
|
