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. Image for the cookie policy date
close icon

Drag/Drop from ListBox to TreeView

Hello,

Is it possible to drag and item from a ListBox and drop it onto a TreeView?

The idea is to have a Splitter with the TreeView in the left pane and a ListBox in the right.  The TreeView would contain a list of folders and the ListBox would contain the items in the selected folder.  Dragging an item from the ListBox to the TreeView would have the effect of moving the item from one folder to another.

A concept screen shot is attached.

If this isn't possible, is there another suggested way to accomplish this?  Note that I'm not working with a directory/file structure here, bather rather a way to organize records in a table.

Thanks,

Randy Craven

Attachment: 20170329_Tree__ListView_DragDrop_Idea_371eb4c1.zip

11 Replies

AP Arun Palaniyandi Syncfusion Team March 30, 2017 10:16 AM UTC

Hi Randy,   
  
Thanks for contacting Syncfusion support.   
 
Yes, it is possible to drag an item from a ListBox and then drop into a TreeView. This can be achieved by using the itemDrop event of the ListBox to find its drop target element and then to add the item in the corresponding node using the addNode method of the TreeView.   
 
We have prepared a Demo sample for your reference:   
 
If the sample didn’t meet your requirement, then please give us more information it will help us provide a prompt solution. 
 
Regards,   
Arun P.   



RC Randy Craven March 30, 2017 05:16 PM UTC

Hello Arun,

Thanks for your reply.  However, the jsplayground link gives a 404 error when I try it.  Could you post that link again?

Thank you,

Randy Craven


AP Arun Palaniyandi Syncfusion Team March 31, 2017 07:02 AM UTC

  
Hi Randy,    
   
We regret the inconvenience caused. 

The JSPlayground link didn’t worked because of some technical issues and we are resolving it in our end. We have now shared the sample locally and the sample can be downloaded from the below location. 

  
Please let us know if you have any queries. 

Regards, 
Arun P. 



RC Randy Craven March 31, 2017 02:52 PM UTC

Hello Arun,

Thank you, I was able to solve my problem using the sample you provided.

I would like to ask a follow up question.  When the ListBox item is dragged over a TreeView node, is it possible to expand the TreeView node so that the ListBox item might be dropped onto one of the child nodes?

Thanks,
Randy Craven




AP Arun Palaniyandi Syncfusion Team April 3, 2017 12:13 PM UTC

Hi Randy,     
 
Thanks for your update. 
 
Yes, it possible to expand the TreeView node when a ListBox item is dragged over a TreeView node. Hence this can be achieved by using the itemDrag event to find that target node and then manually open this node using the expandNode method of the TreeView.    
We have prepared a Demo sample for your reference:    
  
Please let us know if you have any queries further. 
Regards, 
Arun P. 



RC Randy Craven April 4, 2017 03:00 PM UTC

Thank you, that gives me all the information I need.



AP Arun Palaniyandi Syncfusion Team April 5, 2017 07:04 AM UTC

Hi Randy, 
 
We are glad that our solution had helped you. 
 
Please let us know if you have any queries in future. 
 
Regards, 
Arun P. 



RC Randy Craven June 2, 2017 05:46 PM UTC

Hello,

I have another question concerning the jsplayground example above:

When an item is dragged from the listbox on the right: if the listbox item is dropped on the listbox, nothing should happen.  If the listbox item is dropped on a treeview node, then some action will be taken.

In the listbox itemDrop event is there a way to distinguish between these two targets?

thank you,
Randy Craven



AP Arun Palaniyandi Syncfusion Team June 5, 2017 11:22 AM UTC

Hi Randy,      
  
Thanks for your update.  
 
Query 1:”When an item is dragged from the listbox on the right: if the listbox item is dropped on the listbox, nothing should happen.  If the listbox item is dropped on a treeview node, then some action will be taken.” 
 
We have now modified the sample and if the listbox item is dropped on listbox nothing will be happen. Please find the modified Demo link below. 
 
Query 2:”In the listbox itemDrop event is there a way to distinguish between these two targets?” 
 
Yes, we can distinguish between the targets with using target in the listbox itemDrop argument. This args.target will give us the current target class, so that we can differentiate based on the target object. 
 
Please let us know if you have any queries further. 
 
Regards,  
Arun P.  



RC Randy Craven June 6, 2017 01:42 AM UTC

Thank you, Arun.  This is what I needed.

Randy Craven


AP Arun Palaniyandi Syncfusion Team June 6, 2017 10:14 AM UTC

Hi Randy, 
 
 
We are glad that your issue has been resolved. 
 
Please let us know if you have any queries in future. 
 
Regards, 
Arun P. 


Loader.
Live Chat Icon For mobile
Up arrow icon