Reordering List using ListBox

Matteo

Asked On October 25, 2019 11:51 AM UTC

Hello,

I am using the ListBox component to manage the sequence of execution of various actions during several phases.

I am using the drag and drop functionality for the order and the groupby to manage the phases.

I have a few question:

How do I intercept the drop action?
Can I get the new order of the list?
How can I restrict the user from moving an item outside of the defined phase?

For reference, see the attached screenshot.

Greetings

Matteo

Attachment: listbox_998dab8b.zip

Reply | Reply with quote

Saranya Dhayalan [Syncfusion]

Replied On October 30, 2019 01:09 PM UTC

Hi Matteo,

Thanks for using Syncfusion products.

We have checked your requirements in ListBox.

Query #2: Can I get the new order of the list?

We have checked your requirement, we have achieved your requirement in the drop event. You can check the updated order of list in our dataSource property once the drag and drop is completed. We have added code snippet and sample below to get the updated list in drop event.

[jsx]

onDrop(args) { console.log(this.listObj.dataSource); }

…

<ListBoxComponent ref={(scope) => { this.listObj = scope; }} dataSource={this.data} fields={this.fields} allowDragAndDrop={true} drop={this.onDrop.bind(this)}/>

Sample link: https://stackblitz.com/edit/react-xarbdd?file=index.js

Query #1 & 3: How do I intercept the drop action? and How can I restrict the user from moving an item outside of the defined phase?

Currently, this requirement is unavailable in the ListBox control. We have planned to include these requirements in our Essential Studio Volume 4 2019 release. Which will be expected to roll out on end of December 2019. You can track the status in the below feedback link

https://www.syncfusion.com/feedback/9799/provide-support-to-prevent-drop-item-and-prevent-removing-the-drag-item-from-the

Regards,

Saranya D

Reply | Reply with quote

Matteo

Replied On October 30, 2019 02:18 PM UTC

Thank you for your solution, I will try to implement it and let you know.

You did not entirely undestand point nr 3.

In my listbox I am using groupby to show the items divided, the problem is, it is currently permitted to drop an item from a group to another and I would like to not allow that.

Reply | Reply with quote

Saranya Dhayalan [Syncfusion]

Replied On October 31, 2019 07:24 AM UTC

Hi Matteo,

Thanks for you update.

Query: In my listbox I am using groupby to show the items divided, the problem is, it is currently permitted to drop an item from a group to another and I would like to not allow that

We have completely understood your requirement. We would like to let you know that we will consider your requirement while implementing the promised feature and appreciate your patience until then.

Regards,

Saranya D

Reply | Reply with quote

Matteo

Replied On March 12, 2020 03:38 PM UTC

Is there any news in the matter?

Can I restrict the Drag&Drop of the Grouped ListBox only inside the same Group?

Currently I can move Items between Groups, another issue is, when one group is empty, there is no way to drop any item back into the empty group.

Greetings

Matteo

Reply | Reply with quote

Madhan Venkateshan [Syncfusion]

Replied On March 16, 2020 12:53 PM UTC

Hi Matteo,

Good day to you.

Query : Can I restrict the Drag&Drop of the Grouped ListBox only inside the same Group?

We have checked your reported query, we can achieve this by using the BeforeDrop event. In this event, we can check the droppedElement category and target element category. Please find the below Code snippet:

onBeforeDrop(args) {

var category = this.listObj.getDataByValue(args.target.getAttribute('data-value')).Category;

var droppedItem = this.listObj.getDataByValue(args.droppedElement.getAttribute('data-value')).Category;

if ((category != droppedItem)) {

args.cancel = true;

}

Sample link: https://stackblitz.com/edit/react-xarbdd-nmjpav?file=index.js

Query: when one group is empty, there is no way to drop any item back into the empty group.

We have checked your reported issue, we are able to reproduce it in our end. We have logged a defect report for this and the fix for this issue is estimated to be available Mid of April month 2020.

Regards,

Madhan V

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148581	Oct 25,2019 11:51 AM UTC	Mar 16,2020 12:53 PM UTC	React - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US