Reordering List using ListBox

[Matteo]

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:

1. How do I intercept the drop action?
2. Can I get the new order of the list?
3. 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

[Saranya Dhayalan]

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 

[Matteo]

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.

[Saranya Dhayalan]

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 

[Matteo]

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

[Madhan Venkateshan]

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