We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Reordering List using ListBox

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
loading
Tags: 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:
  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 [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)}/> 
  
  
  
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 
 
  
Regards, 
Saranya D 


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.

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 


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

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; 
            } 
        } 
 
 
 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon