Drag/Drop from ListBox to TreeView

[Randy Craven]

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

[Arun Palaniyandi]

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:   

Demo Link: http://jsplayground.syncfusion.com/aqrjmpss   

 

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.   

[Randy Craven]

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

[Arun Palaniyandi]

  

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. 

http://www.syncfusion.com/downloads/support/forum/129714/ze/TeeviewListBoxcascading-485487170 

  

Please let us know if you have any queries. 

Regards, 

Arun P. 

[Randy Craven]

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

[Arun Palaniyandi]

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:    

Demo Link: http://jsplayground.syncfusion.com/gdy3w5ss 

http://www.syncfusion.com/downloads/support/forum/129714/ze/TeeviewListBoxcascading119934803 

  

Please let us know if you have any queries further. 

Regards, 

Arun P. 

[Randy Craven]

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

[Arun Palaniyandi]

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. 

[Randy Craven]

Hello,

I have another question concerning the jsplayground example above:

http://jsplayground.syncfusion.com/gdy3w5ss

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

[Arun Palaniyandi]

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. 

http://jsplayground.syncfusion.com/nbeakib3 

 

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.  

[Randy Craven]

Thank you, Arun.  This is what I needed.

Randy Craven

[Arun Palaniyandi]

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.