Drag and drop

[Francesco Pruneri]

Hi, I need to do something like allocate users to groups (Active directory style in Windows Server.

Table Users

List of all groups Groups

List of groups attributed UserGroups

I am looking at listboxes

does the drag and drop function work with two listboxes from different tables ?

otherwise I wouldn't know how to do it. Can you give me a hint ? What would be best to do in your opinion ?

[Keerthikaran Venkatachalam]

Hi Francesco,

Thank you for reaching out to us.

After reviewing your query, we would like to clarify that the listbox component is a data source-oriented component. Consequently, if you are using different data sources for two listboxes, drag and drop functionalities cannot be supported. However, if you are using the same type of data (TItem) for both listboxes, drag and drop functionalities should work properly. Please refer to the below demos and UG documentation links.

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

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

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Francesco Pruneri]

THX a lot i'll try

[Francesco Pruneri]

hello, in the meantime I have done this: I have a table called GruopUser. I have a dataset that takes all the records and a dataset that takes only the Distinct (to do it  I found a fantastic example on your site)

So the tables are the same but the datasources are different.

Distinct

<SfListBox DataSource=‘@groupusersDataSourceDistinct’ Scope=‘@scope’ TItem=‘GroupUser’ AllowDragAndDrop=‘true’ Height=‘330px’ TValue=‘string[]’>

<ListBoxFieldSettings Text=‘Description’ Value=‘Description’></ListBoxFieldSettings>

</SfListBox>

All records

<SfListBox DataSource=‘@groupusersDataSource’ Scope=‘@scope’ TItem=‘GroupUser’ AllowDragAndDrop=‘true’ Height=‘330px’ TValue=‘string[]’>

<ListBoxFieldSettings Text=‘Description’ Value=‘Description’></ListBoxFieldSettings>

</SfListBox>

Drag and drop works. The next question is how do I prevent dragging a value from one list to another if the second already contains the value?

after that how can i save only the new item in the DB ?

thx

Translated with DeepL.com (free version)

[Keerthikaran Venkatachalam]

Hi Francesco,

Thank you for reaching out to us.

Query 1: Drag and drop works. The next question is how do I prevent dragging a value from one list to another if the second already contains the value?

By using the OnDrop event of the listbox, you can achieve your requirements. Please refer to the code snippets and sample below.

<div class="listbox-control">

            <h4>Group A</h4>

            <SfListBox @ref="ListBoxObj1" DataSource="@groupsUsers" Scope="@scope" TItem="GroupUser" AllowDragAndDrop="true" Height="250px" TValue="string[]">

                <ListBoxEvents Dropped="DroppedA" OnDrop="OnDropA" TItem="GroupUser" TValue="string[]"></ListBoxEvents>

                <ListBoxFieldSettings Text="GroupName" Value="GroupId"></ListBoxFieldSettings>

            </SfListBox>

        </div>

        <div class="listbox-control">

            <h4>Group B</h4>

            <SfListBox @ref="ListBoxObj2" DataSource="@groups" Scope="@scope" TItem="GroupUser" AllowDragAndDrop="true" Height="250px" TValue="string[]">

                <ListBoxEvents Dropped="DroppedB" OnDrop="OnDropB" TItem="GroupUser" TValue="string[]"></ListBoxEvents>

                <ListBoxFieldSettings Text="GroupName" Value="GroupId"></ListBoxFieldSettings>

            </SfListBox>

        </div>

….

private void OnDropA(DropEventArgs<GroupUser> args)

 {

     var item = args.Items;

     var secondListBoxItems = ListBoxObj2.GetDataList();

     // Check if any item in the first list matches any item in the second list

     if (item.Any(firstItem => secondListBoxItems.Any(secondItem => firstItem.GroupName == secondItem.GroupName)))

     {

         args.Cancel = true;

     }

 }

Query 2: after that how can i save only the new item in the DB ?

By using the Dropped event of the listbox, you can retrieve the dropped listbox item and save it in the database. Please refer to the code snippets and sample below.

private void DroppedA(DropEventArgs<GroupUser> args)

 {

     var item = args.Items;

 }

Sample link: https://blazorplayground.syncfusion.com/VZLTDJroIwZgrreB

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Francesco Pruneri]

You aThx a lot for your fantastic support 

[Keerthikaran Venkatachalam]

You are welcome, Francesco. Please get back to us if you need any other assistance

NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.