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.
Unfortunately, activation email could not send to your email. Please try again.

Drag/Drop from ListBox to TreeView

Thread ID:

Created:

Updated:

Platform:

Replies:

129714 Mar 29,2017 07:20 PM Jun 6,2017 06:14 AM JavaScript 11
loading
Tags: ejListBox
Randy Craven
Asked On March 29, 2017 07:20 PM

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 [Syncfusion]
Replied On March 30, 2017 06:16 AM

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.   


Randy Craven
Replied On March 30, 2017 01:16 PM

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 [Syncfusion]
Replied On March 31, 2017 03:02 AM

  
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. 


Randy Craven
Replied On March 31, 2017 10:52 AM

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 [Syncfusion]
Replied On April 3, 2017 08:13 AM

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. 


Randy Craven
Replied On April 4, 2017 11:00 AM

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


Arun Palaniyandi [Syncfusion]
Replied On April 5, 2017 03:04 AM

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
Replied On June 2, 2017 01:46 PM

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


Arun Palaniyandi [Syncfusion]
Replied On June 5, 2017 07:22 AM

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.  


Randy Craven
Replied On June 5, 2017 09:42 PM

Thank you, Arun.  This is what I needed.

Randy Craven

Arun Palaniyandi [Syncfusion]
Replied On June 6, 2017 06:14 AM

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. 


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.

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.

;