We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customized multiselect dropdown control


Is it possible to do a multiselect dropdown this way? I will explain how to use it.

The items (elements) of this multiselect dropdown control are grouped into Predefined types and Added types.Items, which are grouped in Predefined types, cannot be modified or deleted.

At the top is Autocomplete (optional), if the list of elements is too long.

The Added types group contains items added by the user. Adding new elements is done using the text field at the bottom of the control.

Modifying or deleting added types should be allowed.

A screenshot is attached.



5 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team May 17, 2023 05:10 AM UTC

Hi Aleksandar,

Based on the information you have provided, we suspect that you only need to display a list and perform the Add, Edit, and Delete operations on the data items. To meet your requirements, you can utilize the Syncfusion Blazor ListBox component. We have provided documentation below that explains how to incorporate the Blazor ListBox component into both Blazor Server and Blazor WebAssembly apps using Visual Studio.


Online Demo: https://blazor.syncfusion.com/demos/listbox/checkbox?theme=fluent

If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

  1. Exact Requirement details.
  2. Requirement use case scenario.


Udhaya Kumar D

Marked as answer

AL Aleksandar May 24, 2023 10:23 PM UTC

Hello Udhaya Kumar,

I apologize for not providing more detailed information. I think Listbox is not a good choice. I will explain, although I may be wrong. The mentioned control is built into Datagrid. Here is a screenshot of how the application currently looks.

In this example I (as a user) want to modify the data in the second row. By pressing Edit, the Dialog component is activated. In this component there is a field - a list with several items, organized in two groups. 2 items have been selected. Also, The user should be able to:

  • Add new items,
  • Change or delete some of the existing ones

in the list (Listbox or multiselect dropdown)

Regards Aleksandar

video: link https://share.getcloudapp.com/7KuWerD6

Here is a piece of code

<SfMultiSelect @bind-Value="@(PartnerView.Types)" Placeholder=@localizer["partneriTipPartnera"] DataSource="@PartnerType" ShowDropDownIcon="true" TValue="string" TItem="PartnerTypes" AllowFiltering="true" Mode="@VisualMode.CheckBox" FloatLabelType="FloatLabelType.Auto">

                                <DropDownListTemplates TItem="PartnerTypes">


                                        <div class="footerTipPartnera">                                           

                                            <button class="btn btn-type " style="" @onclick="@ModalShow">+</button>




                                <MultiSelectEvents TValue="string" TItem="PartnerTypes" ValueChange="@onChange1"></MultiSelectEvents>

                                <MultiSelectFieldSettings Text="Name" Value="Name" GroupBy="Category"></MultiSelectFieldSettings>


AL Aleksandar May 29, 2023 12:30 PM UTC

Same scenario (what we need, customizing Blazor multiselest dropdown component), Usecase is demonstrated using Trello app.
Video: https://share.getcloudapp.com/QwuwxGXX

UD UdhayaKumar Duraisamy Syncfusion Team June 4, 2023 07:13 AM UTC

We would like to inform you that the focus will be added to the input of the MultiSelect component in Dom. If the focus is moved to any other input in Dom, then the MultiSelect component will lose focus and the popup element will close. Additionally, the MultiSelect input will not allow the focus to move to the input element that is placed inside the popup.

AL Aleksandar June 5, 2023 10:22 AM UTC

OK, thank you. Best regards Aleksandar

Live Chat Icon For mobile
Up arrow icon