@page "/development/nils/multibox-test"
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
<div class="control-section col-lg-12 checkbox">
@if(@values != null) {
<span> @string.Join(",", values)</span>
}
<div class="col-lg-9">
<div class="content multiselect-checkbox">
<SfMultiSelect TValue="string[]" @bind-Value="@values" Placeholder="Select countries" Mode="@VisualMode.CheckBox" DataSource="@Country" ShowSelectAll="@ShowSelectAllCheckBox" EnableSelectionOrder="@EnableSelectionOrders" ShowDropDownIcon="@EnableDropDownIcon" FilterBarPlaceholder="Search countries" PopupHeight="350px">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="string[]" OnClose="@OnSelect"></MultiSelectEvents>
</SfMultiSelect>
</div>
</div>
<div class="col-lg-3">
<div class="content property-section">
<table>
<tr>
<td>
<SfCheckBox Label="ShowSelectAll" @bind-Checked="@checkSelectAll" ValueChange="@OnSelectAllChange"></SfCheckBox>
</td>
</tr>
<tr>
<td>
<SfCheckBox Label="DropDown Button" @bind-Checked="@dropdownButton" ValueChange="@OnDropDownButtonChange"></SfCheckBox>
</td>
</tr>
<tr>
<td>
<SfCheckBox Label="Selection reorder" @bind-Checked="@selectionReorder" ValueChange="@OnSeletionReorder"></SfCheckBox>
</td>
</tr>
</table>
</div>
</div>
</div>
@code{
public string[] values {get;set;} = new string[0];
public bool ShowSelectAllCheckBox { get; set; } = true;
public bool EnableSelectionOrders { get; set; } = true;
public bool EnableDropDownIcon { get; set; } = true;
private bool checkSelectAll { get; set; } = true;
private bool dropdownButton { get; set; } = true;
private bool selectionReorder { get; set; } = true;
public void OnSelectAllChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
{
this.ShowSelectAllCheckBox = args.Checked;
}
public void OnDropDownButtonChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
{
this.EnableDropDownIcon = args.Checked;
}
public void OnSeletionReorder(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
{
this.EnableSelectionOrders = args.Checked;
}
public void OnSelect (Syncfusion.Blazor.DropDowns.PopupEventArgs args)
{
var test = 1;
}
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
}
<style>
.property-section .e-checkbox-wrapper {
margin: 10px;
}
.control-section.checkbox {
margin-top: 20px;
}
.multiselect-checkbox {
width: 70%;
margin-left: 70px;
}
</style>