CheckBox in Blazor MultiSelect Dropdown Component
17 Dec 202224 minutes to read
The MultiSelect has built-in support to select multiple values through checkbox, when the Mode property is set to CheckBox
.
To use checkbox, inject the CheckBoxSelection
module in the MultiSelect.
@using Syncfusion.Blazor.DropDowns
<SfMultiSelect TValue="string[]" Placeholder="e.g. Australia" Mode="VisualMode.CheckBox" DataSource="@Countries">
<MultiSelectFieldSettings Value="Code" Text="Name"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Country>Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "AU" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
new Country() { Name = "Denmark", Code = "DK" },
new Country() { Name = "France", Code = "FR" },
new Country() { Name = "Finland", Code = "FI" },
new Country() { Name = "Germany", Code = "DE" },
new Country() { Name = "Greenland", Code = "GL" },
new Country() { Name = "Hong Kong", Code = "HK" },
new Country() { Name = "India", Code = "IN" },
new Country() { Name = "Italy", Code = "IT" },
new Country() { Name = "Japan", Code = "JP" },
new Country() { Name = "Mexico", Code = "MX" },
new Country() { Name = "Norway", Code = "NO" },
new Country() { Name = "Poland", Code = "PL" },
new Country() { Name = "Switzerland", Code = "CH" },
new Country() { Name = "United Kingdom", Code = "GB" },
new Country() { Name = "United States", Code = "US" },
};
}
Select All
The MultiSelect component has in-built support to select all the list items using Select All
options in the header. When the ShowSelectAll property is set to true, by default Select All text will show. You can customize the name attribute of the Select All option by using SelectAllText.
For the unSelect All option, by default unSelect All text will show. You can customize the name attribute of the unSelect All option by using UnSelectAllText.
@using Syncfusion.Blazor.DropDowns
<SfMultiSelect TValue="string[]" Placeholder="e.g. Australia" ShowSelectAll=true SelectAllText="Select All" UnSelectAllText="unSelect All" Mode="VisualMode.CheckBox" DataSource="@Countries">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Country>Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "AU" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
new Country() { Name = "Denmark", Code = "DK" },
new Country() { Name = "France", Code = "FR" },
new Country() { Name = "Finland", Code = "FI" },
new Country() { Name = "Germany", Code = "DE" },
new Country() { Name = "Greenland", Code = "GL" },
new Country() { Name = "Hong Kong", Code = "HK" },
new Country() { Name = "India", Code = "IN" },
new Country() { Name = "Italy", Code = "IT" },
new Country() { Name = "Japan", Code = "JP" },
new Country() { Name = "Mexico", Code = "MX" },
new Country() { Name = "Norway", Code = "NO" },
new Country() { Name = "Poland", Code = "PL" },
new Country() { Name = "Switzerland", Code = "CH" },
new Country() { Name = "United Kingdom", Code = "GB" },
new Country() { Name = "United States", Code = "US" },
};
}
Selection Limit
Defines the limit of the selected items using MaximumSelectionLength.
<SfMultiSelect TValue="string[]" Placeholder="e.g. Australia" MaximumSelectionLength=3 Mode="VisualMode.CheckBox" DataSource="@Countries">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Country>Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "AU" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
new Country() { Name = "Denmark", Code = "DK" },
new Country() { Name = "France", Code = "FR" },
new Country() { Name = "Finland", Code = "FI" },
new Country() { Name = "Germany", Code = "DE" },
new Country() { Name = "Greenland", Code = "GL" },
new Country() { Name = "Hong Kong", Code = "HK" },
new Country() { Name = "India", Code = "IN" },
new Country() { Name = "Italy", Code = "IT" },
new Country() { Name = "Japan", Code = "JP" },
new Country() { Name = "Mexico", Code = "MX" },
new Country() { Name = "Norway", Code = "NO" },
new Country() { Name = "Poland", Code = "PL" },
new Country() { Name = "Switzerland", Code = "CH" },
new Country() { Name = "United Kingdom", Code = "GB" },
new Country() { Name = "United States", Code = "US" },
};
}
Selection Reordering
Using EnableSelectionOrder to Reorder the selected items in popup visibility state.
<SfMultiSelect TValue="string[]" Placeholder="e.g. Australia" EnableSelectionOrder=false Mode="VisualMode.CheckBox" DataSource="@Countries">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Country>Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "AU" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
new Country() { Name = "Denmark", Code = "DK" },
new Country() { Name = "France", Code = "FR" },
new Country() { Name = "Finland", Code = "FI" },
new Country() { Name = "Germany", Code = "DE" },
new Country() { Name = "Greenland", Code = "GL" },
new Country() { Name = "Hong Kong", Code = "HK" },
new Country() { Name = "India", Code = "IN" },
new Country() { Name = "Italy", Code = "IT" },
new Country() { Name = "Japan", Code = "JP" },
new Country() { Name = "Mexico", Code = "MX" },
new Country() { Name = "Norway", Code = "NO" },
new Country() { Name = "Poland", Code = "PL" },
new Country() { Name = "Switzerland", Code = "CH" },
new Country() { Name = "United Kingdom", Code = "GB" },
new Country() { Name = "United States", Code = "US" },
};
}
Properties
Mode
Configures visibility mode for component interaction.
Default value of Mode is Default
.
Possible values are:
-
Box
- selected items will be visualized in chip. -
Delimiter
- selected items will be visualized in text content. -
Default
- on focus in component will act in box mode. on blur component will act in delimiter mode. -
CheckBox
- The ‘checkbox’ will be visualized in list item.
Click to refer the code for Mode
SelectAllText
Specifies the selectAllText to be displayed on the component.
Default value of SelectAllText is Select All
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.DropDowns;
<div class="col-lg-12">
<div class="col-lg-8 control-section sb-property-border">
<div class="control-wrapper">
<label class="example-label">Select countries</label>
<SfMultiSelect TValue="string[]" TItem="Countries" AllowFiltering="true" Placeholder="e.g. Australia" Mode="@VisualMode.CheckBox" DataSource="@Country" ShowSelectAll="@ShowSelectAllCheckBox" EnableSelectionOrder="@EnableSelectionOrders" ShowDropDownIcon="@EnableDropDownIcon" Show FilterBarPlaceholder="Search countries" PopupHeight="350px" SelectAllText="@SelectAllText" UnSelectAllText="@UnSelectAllText">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
</div>
</div>
<div class="col-lg-4">
<div class="property-panel-section">
<div class="property-panel-header">Properties</div>
<div class="property-panel-content">
<SfCheckBox Label="Show SelectAll" @bind-Checked="@CheckSelectAll" ValueChange="@OnSelectAllChange" TChecked="bool"></SfCheckBox>
</div>
<div class="property-panel-content">
<SfCheckBox Label="Dropdown Button" @bind-Checked="@DropDownButton" ValueChange="@OnDropDownButtonChange" TChecked="bool"></SfCheckBox>
</div>
<div class="property-panel-content">
<SfCheckBox Label="Selection Reorder" @bind-Checked="@SelectionReorder" ValueChange="@OnSeletionReorder" TChecked="bool"></SfCheckBox>
</div>
</div>
</div>
</div>
@code{
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 string SelectAllText { get; set; } = "Select all the countries";
public string UnSelectAllText { get; set; } = "UnSelect all the countries";
public void OnSelectAllChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.ShowSelectAllCheckBox = args.Checked;
}
public void OnDropDownButtonChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.EnableDropDownIcon = args.Checked;
}
public void OnSeletionReorder(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.EnableSelectionOrders = args.Checked;
}
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>
.control-wrapper {
max-width: 300px;
margin: 0 auto;
padding: 50px 0px 0px;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
.property-panel-content {
padding: 0px 0px 15px 0px;
}
.property-panel-content:last-child {
padding: 0px 0px 40px 0px;
}
</style>
ShowSelectAll
Allows you to either show or hide the selectAll option on the component.
Default value of ShowSelectAll is false
.
Click to refer the code ShowSelectAll
UnSelectAllText
Specifies the UnSelectAllText to be displayed on the component.
Default value for UnSelectAllText is UnSelect All
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.DropDowns;
<div class="col-lg-12">
<div class="col-lg-8 control-section sb-property-border">
<div class="control-wrapper">
<label class="example-label">Select countries</label>
<SfMultiSelect TValue="string[]" TItem="Countries" AllowFiltering="true" Placeholder="e.g. Australia" Mode="@VisualMode.CheckBox" DataSource="@Country" ShowSelectAll="@ShowSelectAllCheckBox" EnableSelectionOrder="@EnableSelectionOrders" ShowDropDownIcon="@EnableDropDownIcon" Show FilterBarPlaceholder="Search countries" PopupHeight="350px" SelectAllText="@SelectAllText" UnSelectAllText="@UnSelectAllText">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
</div>
</div>
<div class="col-lg-4">
<div class="property-panel-section">
<div class="property-panel-header">Properties</div>
<div class="property-panel-content">
<SfCheckBox Label="Show SelectAll" @bind-Checked="@CheckSelectAll" ValueChange="@OnSelectAllChange" TChecked="bool"></SfCheckBox>
</div>
<div class="property-panel-content">
<SfCheckBox Label="Dropdown Button" @bind-Checked="@DropDownButton" ValueChange="@OnDropDownButtonChange" TChecked="bool"></SfCheckBox>
</div>
<div class="property-panel-content">
<SfCheckBox Label="Selection Reorder" @bind-Checked="@SelectionReorder" ValueChange="@OnSeletionReorder" TChecked="bool"></SfCheckBox>
</div>
</div>
</div>
</div>
@code{
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 string SelectAllText { get; set; } = "Select all the countries";
public string UnSelectAllText { get; set; } = "UnSelect all the countries";
public void OnSelectAllChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.ShowSelectAllCheckBox = args.Checked;
}
public void OnDropDownButtonChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.EnableDropDownIcon = args.Checked;
}
public void OnSeletionReorder(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.EnableSelectionOrders = args.Checked;
}
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>
.control-wrapper {
max-width: 300px;
margin: 0 auto;
padding: 50px 0px 0px;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
.property-panel-content {
padding: 0px 0px 15px 0px;
}
.property-panel-content:last-child {
padding: 0px 0px 40px 0px;
}
</style>
Methods
SelectAllAsync(Boolean)
Based on the state parameter, entire list item will be selected/deselected.
Declaration
NOTE
public Task SelectAllAsync(bool state)
parameter
- True - Selects entire list items.
- False -Un Selects entire list items.
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.DropDowns;
<div class=button>
<button @onclick="Show">Select All</button>
</div>
<div class=button>
<button @onclick="Hide">Deselect All</button>
</div>
<div class="col-lg-12">
<div class="col-lg-8 control-section sb-property-border">
<div class="control-wrapper">
<label class="example-label">Select countries</label>
<SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Countries" AllowFiltering="true" Placeholder="e.g. Australia" Mode="@VisualMode.CheckBox" DataSource="@Country" ShowSelectAll="@ShowSelectAllCheckBox" EnableSelectionOrder="@EnableSelectionOrders" ShowDropDownIcon="@EnableDropDownIcon" Show FilterBarPlaceholder="Search countries" PopupHeight="350px">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
</div>
</div>
<div class="col-lg-4">
<div class="property-panel-section">
<div class="property-panel-header">Properties</div>
<div class="property-panel-content">
<SfCheckBox Label="Show SelectAll" @bind-Checked="@CheckSelectAll" ValueChange="@OnSelectAllChange" TChecked="bool"></SfCheckBox>
</div>
<div class="property-panel-content">
<SfCheckBox Label="Dropdown Button" @bind-Checked="@DropDownButton" ValueChange="@OnDropDownButtonChange" TChecked="bool"></SfCheckBox>
</div>
<div class="property-panel-content">
<SfCheckBox Label="Selection Reorder" @bind-Checked="@SelectionReorder" ValueChange="@OnSeletionReorder" TChecked="bool"></SfCheckBox>
</div>
</div>
</div>
</div>
@code{
SfMultiSelect<string[],Countries> MultiSelectObj;
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<bool> args)
{
this.ShowSelectAllCheckBox = args.Checked;
}
public void OnDropDownButtonChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.EnableDropDownIcon = args.Checked;
}
public void OnSeletionReorder(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
{
this.EnableSelectionOrders = args.Checked;
}
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" }
};
public void Show()
{
this.MultiSelectObj.SelectAllAsync(true);
}
public void Hide()
{
this.MultiSelectObj.SelectAllAsync(false);
}
}
<style>
.control-wrapper {
max-width: 300px;
margin: 0 auto;
padding: 50px 0px 0px;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
.property-panel-content {
padding: 0px 0px 15px 0px;
}
.property-panel-content:last-child {
padding: 0px 0px 40px 0px;
}
</style>