Customized multiselect dropdown control

[Aleksandar]

Hi,

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.

Regards

[UdhayaKumar Duraisamy]

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.

Documentation:

• Getting Started with Blazor ListBox Component
• CheckBox Selection
• Grouping

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.

Regards,

Udhaya Kumar D

[Aleksandar]

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

                                    <FooterTemplate>

                                        <div class="footerTipPartnera">                                           

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

                                        </div>

                                    </FooterTemplate>

                                </DropDownListTemplates>

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

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

                            </SfMultiSelect>

[Aleksandar]

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

[UdhayaKumar Duraisamy]

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.

[Aleksandar]

OK, thank you. Best regards Aleksandar