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.
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.
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.
Udhaya Kumar D
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:
in the list (Listbox or multiselect dropdown)
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">
<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>
Same scenario (what we need, customizing Blazor
dropdown component), Usecase is demonstrated using Trello app.
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.
OK, thank you. Best regards Aleksandar