How to make Group always visible

[Geraud Bertrand]

Hello, I want to create a ListBox with group feature, drag and drop feature. But i would want to have group always visible to user. The group possible depend on which item selected to show the listbox.

Hierarchy :

Category

- Elements

- Operations

--- Elements

Do you have any idea on how to do it ? Or another component which is same design ?

[Gayathri KarunaiAnandam]

Hi Geraud, 

Query 1: I want to create a ListBox with group feature, drag and drop feature. 

We can use Grouping and drag and drop in Listbox by using the AllowDragAndDrop and GroupBy property. Please check the below documentation link.  

https://blazor.syncfusion.com/documentation/listbox/drag-and-drop 

https://blazor.syncfusion.com/documentation/listbox/sorting-grouping#grouping 

Query 2: Hierarchy 

We cannot be able to set hierarchical data to ListBox component. For this, requirement we suggest you check TreeView component. TreeView component is rendered in hierarchical structure with parent and child nodes.    

Refer to the following demo and UG links for more information about the TreeView component.  

  

Demo: https://blazor.syncfusion.com/demos/treeview/local-data?theme=bootstrap5  

  

UG links:  

  

https://blazor.syncfusion.com/documentation/treeview/data-binding#hierarchical-data  

  

https://blazor.syncfusion.com/documentation/treeview/drag-and-drop  

Query 3: But i would want to have group always visible to user. The group possible depend on which item selected to show the listbox. 

Please share some additional information on this requirement with a screenshot or online references. Based on this, we will check and assist you promptly. 

Regards, 

Gayathri K 

[Geraud Bertrand]

This screen show the ListBox of Operation groupBy Element.Nom (for example : Sol, Corbeilles/poubelles, ...) on the left and on the right a ListBox of Operation without a groupBy and allow DragAndDrop. What I would want is to have Element always show and drag my operation in one of them. Do you have any idea on how to do it ?

Example : 

- I drag `Aération des locaux (si possible)` to Element : `Sol`

- The Operation go inside Sol Group. 

[Gayathri KarunaiAnandam]

Hi Geraud Bertrand, 

We have prepared a sample based on your requirement. Please check the below code snippet and sample. 

Code snippet: 

<div id="listbox1"> 

    <h4>Group A</h4> 

    <SfListBox TValue="string[]" DataSource="@VegetableData" TItem="VegetableDetail" AllowDragAndDrop="true" Scope="combined-list" Height="290px"> 

         <ListBoxFieldSettings GroupBy = "Category" Text="Vegetable" Value="Id" /> 

    </SfListBox> 

</div> 

<div id="listbox2"> 

    <h4>Group B</h4> 

    <SfListBox TValue="string[]" DataSource="@GroupB" Scope="combined-list" AllowDragAndDrop="true" Height="290px" TItem="VegetableDetail" @ref="List2"> 

        <ListBoxFieldSettings  Text="Vegetable" Value="Id" /> 

       <ListBoxEvents TValue="string[]"  TItem="VegetableDetail"></ListBoxEvents> 

    </SfListBox> 

</div> 

 

@code { 

    public SfListBox<string[], VegetableDetail> List2; 

    public string groupby = null; 

    public List<VegetableDetail> VegetableData = new List<VegetableDetail> { 

       new VegetableDetail{ Vegetable = "Cabbage", Category = "Leafy and Salad", Id = "item1" }, 

       new VegetableDetail{ Vegetable = "Spinach", Category = "Leafy and Salad", Id = "item2" }, 

    }; 

      public List<VegetableDetail> GroupB = new List<VegetableDetail> { 

       new VegetableDetail{ Vegetable = "Orange", Category = "Beans", Id = "item1" }, 

       new VegetableDetail{ Vegetable = "PineApple", Category = "Beans", Id = "item2" }, 

       new VegetableDetail{ Vegetable = "Apple", Category = "Beans", Id = "item3" }, 

 

    }; 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/172043/ze/ListBox872424503 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K