Need to have two multi-listboxes on a single page

[Mike Chafin]

Multiple ListBox

To drag and drop an item or group of item between two listbox can achieved by setting AllowDragAndDrop property to true and Scope should be set as combined-list in both the listbox.

How do I handle having 2 sets of Multiple ListBox on the same page? I should not be able to drag from one set to the other.

[Mike Chafin]

After some experimentation, it seems you can just change the Scope to a unique name for the shared list boxes i.e. it can be more than two list boxes.

[Gayathri KarunaiAnandam]

Hi Mike, 

We have checked your reported query. We can drag and drop to different listboxes by using the Scope property. We would like to let you know that by assigning a same scope to all listbox, we can drag and drop between them. Please check the below code snippet. 

Code: 

<div class="listbox-control"> 

            <h4>Group A</h4> 

            <SfListBox DataSource="@groupA" Scope="@scope" TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]"> 

                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 

            </SfListBox> 

        </div> 

        

        <div class="listbox-control"> 

            <h4>Group B</h4> 

            <SfListBox DataSource="@groupB"  Scope="@scope"  TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]"> 

                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 

            </SfListBox> 

            <h4>Group C</h4> 

            <SfListBox DataSource="@groupB"  Scope="@scope"  TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]"> 

                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 

                <h4>Group D</h4> 

            <SfListBox DataSource="@groupB"  Scope="@scope"  TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]"> 

                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 

            </SfListBox> 

            </SfListBox> 

    </div> 

</div> 

</div> 

@code{ 

    private readonly string scope = "multiple"; 

    private List<ListItem> groupA = new List<ListItem> { 

        new ListItem { Name = "Australia", Code = "AU" }, 

        new ListItem { Name = "Bermuda", Code = "BM" }, 

        new ListItem { Name = "Canada", Code = "CA" }, 

        new ListItem { Name = "Cameroon", Code = "CM" }, 

        new ListItem { Name = "Denmark", Code = "DK" }, 

        new ListItem { Name = "France", Code = "FR" }, 

        new ListItem { Name = "Finland", Code = "FI" }, 

        new ListItem { Name = "Germany", Code = "DE" }, 

        new ListItem { Name = "Hong Kong", Code = "HK" } 

    }; 

    private List<ListItem> groupB = new List<ListItem> { 

        new ListItem { Name = "India", Code = "IN" }, 

        new ListItem { Name = "Italy", Code = "IT" }, 

        new ListItem { Name = "Japan", Code = "JP" }, 

        new ListItem { Name = "Mexico", Code = "MX" }, 

        new ListItem { Name = "Norway", Code = "NO" }, 

        new ListItem { Name = "Poland", Code = "PL" }, 

        new ListItem { Name = "Switzerland", Code = "CH" }, 

        new ListItem { Name = "United Kingdom", Code = "GB" }, 

        new ListItem { Name = "United States", Code = "US" } 

    }; 

    public class ListItem 

    { 

        public string Name { get; set; } 

        public string Code { get; set; } 

    } 

} 

For your reference, please check the below sample. 

Sample: https://www.syncfusion.com/downloads/support/forum/170206/ze/ListBox-932677436 

Demo: https://blazor.syncfusion.com/demos/listbox/drag-and-drop?theme=bootstrap4 

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

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

Regards, 

Gayathri K