DEV Community

loading...
Cover image for Exploring Key Features of Blazor MultiSelect Dropdown
Syncfusion, Inc.

Exploring Key Features of Blazor MultiSelect Dropdown

Suresh Mohan
Suresh is a Product Manager at Syncfusion and a technology enthusiast. He helps people follow best practices in coding and in using Syncfusion controls in their applications.
Originally published at syncfusion.com on ・10 min read

Syncfusion’s Blazor MultiSelect Dropdown 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 and WebAssembly (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

The Blazor MultiSelect Dropdown component provides the following two methods to bind data sources to it:

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.

<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" }
    };
}
Enter fullscreen mode Exit fullscreen mode

Local Data Binding in Blazor MultiSelect Dropdown Component
Local Data Binding in Blazor MultiSelect Dropdown

Remote data binding

Use the Syncfusion Data Manager 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.

@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; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Remote Data Binding in Blazor MultiSelect Dropdown
Remote Data Binding in Blazor MultiSelect Dropdown

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 support to overcome this issue. You can enable this by setting the AllowFiltering property as true.

Refer to the following code example.

@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; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Filtering Data in Blazor MultiSelect Dropdown
Filtering Data in Blazor MultiSelect Dropdown

Customize appearance with template

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

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 tag.

Refer to the following code example.

<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; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Item Template in Blazor MultiSelect Dropdown
Item Template Customization in Blazor MultiSelect Dropdown

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 tag.

<HeaderTemplate>
  <table><tr><th><b>Contact Name</b></th><th width="240px"><b>Country</b></th></tr></table>
</HeaderTemplate>
Enter fullscreen mode Exit fullscreen mode

Header Template in Blazor MultiSelect Dropdown
Header Template Customization in Blazor MultiSelect Dropdown

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 tag.

Refer to the following code example.

<ValueTemplate>
   <span>@((context as CustomerDetails).ContactName) - <i>@((context as CustomerDetails).Country)</i></span>
</ValueTemplate>
Enter fullscreen mode Exit fullscreen mode

Value Template in Blazor MultiSelect Dropdown
Value Template Customization in Blazor MultiSelect Dropdown

Footer template

You can place any custom element as the footer of the drop-down list pop-up menu by using the FooterTemplate tag.

Refer to the following code example.

@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; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Footer Template in Blazor MultiSelect Dropdown
Footer Template Customization in Blazor MultiSelect Dropdown

Check box mode

The Blazor MultiSelect Dropdown component has check box 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.

@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; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Checkbox Mode in Blazor MultiSelect Dropdown
Checkbox Mode in Blazor MultiSelect Dropdown

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

@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;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Grouping the List Items in Blazor MultiSelect Dropdown
Grouping the List Items in Blazor MultiSelect Dropdown

Conclusion

In this blog, we have seen the key features of the Blazor MultiSelect Dropdown component . 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, GitHub demos, and documentation.

Try our Blazor MultiSelect Dropdown component by downloading a free 30-day trial or from our NuGet package.

Our MultiSelect Dropdown component is available in our Blazor, ASP.NET (Core, MVC), JavaScript, Angular, React, and Vue 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, feedback portal, or Direct-Trac. We are always happy to assist you!

Related blogs

Discussion (0)