Exploring Key Features of Blazor MultiSelect Dropdown
Tags: blazor, csharp, dotnet, webdev
Published: 2021-06-11 11:40:14

---
title: Exploring Key Features of Blazor MultiSelect Dropdown
published: true
date: 2021-06-10 11:02:01 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/key-features-of-blazor-multiselect-dropdown.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Exploring-Key-Features-of-Blazor-MultiSelect-Dropdown-672x372.png
---
Syncfusion’s Blazor [MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown "Link to Blazor MultiSelect Dropdown component") is a textbox component that allows a user to type or select multiple values from a list of predefined options. It works in both [Blazor Server](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0#blazor-server "Link to Blazor Server documentation") and [WebAssembly](https://en.wikipedia.org/wiki/WebAssembly "Link to Blazor WebAssembly Wikipedia page") (WASM) applications. You can bind the MultiSelect Dropdown to a data source using different modes like default, chip (box), delimiter, and check box.

A real-time example of using the MultiSelect Dropdown in an application is to select multiple email IDs for the To and CC fields.

This blog will explain the following key features of the Blazor MultiSelect Dropdown component along with code examples:

- [Data Binding](#data-binding)
- [Filtering Data](#filtering-data)
- [Customize Appearance with Template](#customize-appearance-with-template)
- [Check Box Mode](#checkbox-mode)
- [Grouping List Items](#grouping-the-list-items)

## Data binding

The Blazor MultiSelect Dropdown component provides the following two methods to bind [data sources](https://blazor.syncfusion.com/documentation/multiselect-dropdown/data-source/ "Link to Data Source documentation of Blazor MultiSelect Dropdown") to it:

- [Local Data Binding](#local-data-binding)
- [Remote Data Binding](#remote-data-binding)

### Local data binding

For this approach, create the required model classes and data. Then, bind the data to the  **DataSource****  **property of the Blazor MultiSelect Dropdown.

The following code example in the Razor file binds the local data to the Blazor MultiSelect Dropdown.

```js
<SfMultiSelect TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
    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" }
    };
}
```

![Local Data Binding in Blazor MultiSelect Dropdown Component](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Local-Data-Binding-in-Blazor-MultiSelect-Dropdown-Component.png)<figcaption>Local Data Binding in Blazor MultiSelect Dropdown</figcaption>

### Remote data binding

Use the [Syncfusion Data Manager](https://blazor.syncfusion.com/documentation/data/ "Link to Blazor DataManager documentation") to retrieve tasks from a remote data source. Then, define the value and text fields to bind the data with the MultiSelect Dropdown component.

Refer to the following code example.

```js
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="CustomerDetails" Placeholder="Select a customer" Query="@Query">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
    <MultiSelectFieldSettings Text="ContactName" Value="CustomerID"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
    public Query Query = new Query().Select(new List<string> { "ContactName", "CustomerID" }).Take(10).RequiresCount();
    public class CustomerDetails
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string Country { get; set; }
        public string Address { get; set; }
    }
}
```

![Remote Data Binding in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Remote-Data-Binding-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Remote Data Binding in Blazor MultiSelect Dropdown</figcaption>

## Filtering data

When displaying a huge amount of data in a drop-down list, users may find it difficult to locate and select the items of their choice. The MultiSelect Dropdown has built-in [filtering](https://blazor.syncfusion.com/documentation/multiselect-dropdown/filtering/ "Link to Filtering in Blazor MultiSelect Dropdown documentation") support to overcome this issue. You can enable this by setting the  **AllowFiltering**  property as  **true**.

Refer to the following code example.

```js
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="CustomerDetails" Placeholder="Select a customer" AllowFiltering=true Query="@Query">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
    <MultiSelectFieldSettings Text="ContactName" Value="CustomerID"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
    public Query Query = new Query().Select(new List<string> { "ContactName", "CustomerID" }).Take(10).RequiresCount();
    public class CustomerDetails
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string Country { get; set; }
        public string Address { get; set; }
    }
}
```

![Filtering Data in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Filtering-data-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Filtering Data in Blazor MultiSelect Dropdown</figcaption>

## Customize appearance with template

The Blazor MultiSelect Dropdown provides the following template options to customize the default UI based on your needs:

- [Item Template](#item-template)
- [Header Template](#header-template)
- [Value Template (Chips)](#value-template)
- [Footer Template](#footer-template)

The Template tag provides an implicit parameter named  **context** to access its corresponding attributes. For example, the  **Item template’s** context property provides all the information about a list of data such as value field, text filed, and so on.

In the upcoming examples, we will display a list of items in multiple columns like a grid view.

**Note:**  We have provided a multicolumn style class in the built-in Syncfusion Blazor theme files. So, we need to provide the multicolumn root class API name as **e-multi-column** in the **CssClass**.

### Item template

Customize the content of each list item within the drop-down list using the [ItemTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates/#item-template "Link to Item template documentation of Blazor MultiSelect Dropdown") tag.

Refer to the following code example.

```js
<SfMultiSelect TValue="string[]" TItem="CustomerDetails" Placeholder="Select a customer" AllowFiltering=true CssClass="e-multi-column" Query="@Query">
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
        <MultiSelectTemplates TItem="CustomerDetails">
            <ItemTemplate>
                <table><tbody><tr><td>@((context as CustomerDetails).ContactName)</td><td width="240px">@((context as CustomerDetails).Country)</td></tr> </tbody></table>
            </ItemTemplate>
        </MultiSelectTemplates>
        <MultiSelectFieldSettings Text="ContactName" Value="CustomerID"></MultiSelectFieldSettings>
    </SfMultiSelect>
@code {
    public Query Query = new Query().Select(new List<string> { "ContactName", "CustomerID", "Country" }).Take(10).RequiresCount();
    public class CustomerDetails
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string Country { get; set; }
        public string Address { get; set; }
    }
}
```

![Item Template in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Item-Template-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Item Template Customization in Blazor MultiSelect Dropdown</figcaption>

### Header template

The header element is shown statically at the top of the pop-up menu. You can place any custom element as the header using the [HeaderTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates/#header-template "Link to Header template documentation of Blazor MultiSelect Dropdown") tag.

```html
<HeaderTemplate>
  <table><tr><th><b>Contact Name</b></th><th width="240px"><b>Country</b></th></tr></table>
</HeaderTemplate>
```

![Header Template in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Header-Template-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Header Template Customization in Blazor MultiSelect Dropdown</figcaption>

### Value template (chip)

The currently selected value will be displayed by default on the MultiSelect Dropdown input. You can also customize it by using the [ValueTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates/#value-template "Link to Value template documentation of Blazor MultiSelect Dropdown") tag.

Refer to the following code example.

```html
<ValueTemplate>
   <span>@((context as CustomerDetails).ContactName) - <i>@((context as CustomerDetails).Country)</i></span>
</ValueTemplate>
```

![Value Template in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Value-Template-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Value Template Customization in Blazor MultiSelect Dropdown</figcaption>

### Footer template

You can place any custom element as the footer of the drop-down list pop-up menu by using the [FooterTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates/#footer-template "Link to Footer template documentation of Blazor MultiSelect Dropdown") tag.

Refer to the following code example.

```js
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

    <SfMultiSelect TValue="string[]" TItem="CustomerDetails" Placeholder="Select a customer" AllowFiltering=true CssClass="e-multi-column" Query="@Query">
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
        <MultiSelectTemplates TItem="CustomerDetails">
            <HeaderTemplate>
                <table><tr><th><b>Contact Name</b></th><th width="240px"><b>Country</b></th></tr></table>
            </HeaderTemplate>
            <ItemTemplate>
                <table><tbody><tr><td>@((context as CustomerDetails).ContactName)</td><td width="240px">@((context as CustomerDetails).Country)</td></tr> </tbody></table>
            </ItemTemplate>
            <ValueTemplate>
                <span>@((context as CustomerDetails).ContactName) - <i>@((context as CustomerDetails).Country)</i></span>
            </ValueTemplate>
            <FooterTemplate>
                <span class='e-footer'><b>Total list items: 8 </b></span>
            </FooterTemplate>
        </MultiSelectTemplates>
        <MultiSelectFieldSettings Text="ContactName" Value="CustomerID"></MultiSelectFieldSettings>
    </SfMultiSelect>
@code {
    public Query Query = new Query().Select(new List<string> { "ContactName", "CustomerID", "Country" }).Take(8).RequiresCount();
    public class CustomerDetails
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string Country { get; set; }
        public string Address { get; set; }
    }
}
```

![Footer Template in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Footer-Template-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Footer Template Customization in Blazor MultiSelect Dropdown</figcaption>

## Check box mode

The Blazor MultiSelect Dropdown component has [check box](https://blazor.syncfusion.com/documentation/multiselect-dropdown/checkbox/ "Link to CheckBox in Blazor MultiSelect Dropdown documentation") support. Enabling check box mode helps users to easily handle multiple selected values. It has built-in support for select all, selection limits, and selection reordering.

Refer to the following code example.

```js
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

    <SfMultiSelect TValue="string[]" TItem="CustomerDetails" Placeholder="Select a customer" Mode="VisualMode.CheckBox" AllowFiltering=true CssClass="e-multi-column" Query="@Query">
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
        <MultiSelectFieldSettings Text="ContactName" Value="CustomerID"></MultiSelectFieldSettings>
    </SfMultiSelect>
@code {
    public Query Query = new Query().Select(new List<string> { "ContactName", "CustomerID", "Country" }).Take(10).RequiresCount();
    public class CustomerDetails
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string Country { get; set; }
        public string Address { get; set; }
    }
}
```

![Checkbox Mode in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Checkbox-Mode-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Checkbox Mode in Blazor MultiSelect Dropdown</figcaption>

## Grouping list items

We can arrange logically related items as groups in the MultiSelect Dropdown. A group’s header can be displayed both inline and statically above the groups of items.

To display the group header, map the [GroupBy](https://blazor.syncfusion.com/documentation/multiselect-dropdown/grouping/ "Link to Grouping in Blazor MultiSelect Dropdown documentation") field as **Category.** Then, enable the **EnableGroupCheckBox** property by setting it as  **True**. This lets us select and deselect a complete group of items using the header check box.

Refer to the following code example.

```js
@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="Vegetables" Mode="VisualMode.CheckBox" EnableGroupCheckBox=true Placeholder="Select a vegetable" DataSource="@LocalData">
    <MultiSelectFieldSettings GroupBy="Category" Value="Vegetable"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
    public List<Vegetables> LocalData { get; set; } = new Vegetables().VegetablesList();
    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string ID { get; set; }
        public List<Vegetables> VegetablesList()
        {
            List<Vegetables> Veg = new List<Vegetables>();
            Veg.Add(new Vegetables { Vegetable = "Cabbage", Category = "Leafy and Salad", ID = "item1" });
            Veg.Add(new Vegetables { Vegetable = "Chickpea", Category = "Beans", ID = "item2" });
            Veg.Add(new Vegetables { Vegetable = "Garlic", Category = "Bulb and Stem", ID = "item3" });
            Veg.Add(new Vegetables { Vegetable = "Green bean", Category = "Beans", ID = "item4" });
            Veg.Add(new Vegetables { Vegetable = "Horse gram", Category = "Beans", ID = "item5" });
            Veg.Add(new Vegetables { Vegetable = "Nopal", Category = "Bulb and Stem", ID = "item6" });
            Veg.Add(new Vegetables { Vegetable = "Onion", Category = "Bulb and Stem", ID = "item7" });
            Veg.Add(new Vegetables { Vegetable = "Pumpkins", Category = "Leafy and Salad", ID = "item8" });
            Veg.Add(new Vegetables { Vegetable = "Spinach", Category = "Leafy and Salad", ID = "item9" });
            Veg.Add(new Vegetables { Vegetable = "Wheat grass", Category = "Leafy and Salad", ID = "item10" });
            Veg.Add(new Vegetables { Vegetable = "Yarrow", Category = "Leafy and Salad", ID = "item11" });
            return Veg;
        }
    }
}
```

![Grouping the List Items in Blazor MultiSelect Dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Grouping-the-List-Items-in-Blazor-MultiSelect-Dropdown.png)<figcaption>Grouping the List Items in Blazor MultiSelect Dropdown</figcaption>

## Conclusion

In this blog, we have seen the key features of the [Blazor MultiSelect Dropdown component](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown "Link to Blazor MultiSelect Dropdown") . It also provides built-in themes, sorting capabilities, HTML form support, and several out-of-the-box features. You can easily customize its pop-up menu with multiple modes, which you can learn to do in our [online examples](https://blazor.syncfusion.com/demos/multiselect-dropdown/default-functionalities?theme=bootstrap4 "Link to Blazor MultiSelect Dropdown web demos"), [GitHub demos](https://github.com/syncfusion/blazor-samples/tree/master/Pages/DropDowns/MultiSelect "Link to Blazor MultiSelect Dropdown demos on GitHub"), and [documentation](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started/ "Link to getting started with Blazor MultiSelect Dropdown").

Try our Blazor MultiSelect Dropdown component by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads "Link to the free evaluation of the Syncfusion Essential Studio") or from our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor "Link to Syncfusion.Blazor NuGet package").

Our MultiSelect Dropdown component is available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown "Link to Blazor MultiSelect Dropdown component"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/multiselect-dropdown "Link to ASP.NET Core MultiSelect Dropdown component"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/multiselect-dropdown "Link to ASP.NET MVC MultiSelect Dropdown component")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown "Link to JavaScript MultiSelect Dropdown component"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-multiselect-dropdown "Link to Angular MultiSelect Dropdown component"), [React](https://www.syncfusion.com/react-ui-components/react-multiselect-dropdown "Link to React MultiSelect Dropdown component"), and [Vue](https://www.syncfusion.com/vue-ui-components/vue-multiselect-dropdown "Link to Vue MultiSelect Dropdown component") component suites. So, try them out and enhance your users’ visual experience while selecting multiple items!

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums/blazor-components "Link to the Syncfusion Blazor support forum"), [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"), or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/newincident "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Data Entry Made Easy with Blazor Multicolumn AutoComplete](https://dev.to/syncfusion/data-entry-made-easy-with-blazor-multicolumn-autocomplete-1h5c "Link to Data Entry Made Easy with Blazor Multicolumn AutoComplete blog")
- [Easiest Way to Create a Multicolumn ComboBox in Blazor](https://dev.to/syncfusion/easiest-way-to-create-a-multicolumn-combobox-in-blazor-172m "Link to Easiest Way to Create a Multicolumn ComboBox in Blazor blog")
- [ASP.NET Core Blazor Component Virtualization in .NET 5 – An Overview](https://dev.to/karthickramasamy08/asp-net-core-blazor-component-virtualization-in-net-5-an-overview-1im1-temp-slug-215790 "Link to ASP.NET Core Blazor Component Virtualization in .NET 5 – An Overview blog")
- [Key Features of the Syncfusion Blazor Kanban Board](https://dev.to/syncfusion/key-features-of-the-syncfusion-blazor-kanban-board-2f8 "Link to Key Features of the Syncfusion Blazor Kanban Board blog")