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" },
    };
}

Blazor MultiSelect DropDown with CheckBox

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" },
    };
}

Blazor MultiSelect DropDown with CheckBox Selection

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" },
    };
}

Blazor MultiSelect DropDown with Limit Selection in CheckBox

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" },
    };
}

Changing Selection Order in Blazor MultiSelect DropDown

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

RAZOR

@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>

Blazor MultiSelect DropDown with SelectAllText property

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

RAZOR

@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>

Blazor MultiSelect DropDown with UnSelectAllText property

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.

RAZOR

@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>

Blazor MultiSelect DropDown with SelectAllAsync method

CheckBox in Blazor MultiSelect Dropdown Component

Select All

Selection Limit

Selection Reordering

Properties

Mode

SelectAllText

ShowSelectAll

UnSelectAllText

Methods

SelectAllAsync(Boolean)

Declaration

parameter

See Also