# Drag and drop to list component

**URL:** <https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077>\
**Category:** Ignition\
**Created:** [March 4, 2021, 5:51am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077 "2021-03-04T05:51:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 4, 2021, 5:51am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/1 "2021-03-04T05:51:54Z")

</div>

![drag and drop tree](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4b420d67211abead5491b9d94a70e80818b1267e.png)

i am trying to drag and drop tag to list component. so i entered this script in mouse entered in list component.  
but when i drag and drop single tag to list component its actually replacing the already existing tags in list component. i dont want to remove already existing tags from list when i drag and drop another tag from tag browser tree  
please any one give me scripting idea to correct this issue

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 4, 2021, 2:42pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/2 "2021-03-04T14:42:39Z")

</div>

First, that is a very ‘loose’ definition of drag and drop. Drag and drop implies the user is holding the mouse button down while moving from the drop source to the drop target.

This script will execute anytime that the mouse enters the list component independent of if the user is trying to ‘drag’ a tag to the list or not. Which means that your going to be executing the script when you don’t need to. For instance, if you click on a tag release the mouse button move around the list component without entering and then move into the list component.

That being said you need to add the selected paths to the current dataset using something like `system.dataset.addRows()`

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 4, 2021, 4:22pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/4 "2021-03-04T16:22:37Z")

</div>

> [@prasath.t](#):
>
> I am trying very hard to use this function

The list component is not a drop target. While in theory you could potentially do this from a scripting environment, it is well beyond what I would call non-trivial. More likely this crosses into module development with the SDK and pure java.

The method you described in this post to populate your list I would not recommend.

A better option here is to utilize a popupMenu to add tags to the list component. Is it as flashy as drag and drop? No probably not, but it is much more easily attainable.

In the mouseReleased event handler of your Tag Tree you can use something like the following to add a tag to the list component.

```auto
if event.button == event.BUTTON3:
    def addTagToList(event):
        selectedPaths = event.source.selectedPaths
        event.source.parent.getComponent('List').data = system.dataset.addRows(dataset = event.source.parent.getComponent('List').data, rows = selectedPaths)
    
    try:
        menu = system.gui.createPopupMenu(['Add Selected Tags'],[addTagToList])
        menu.show(event)
    except:
        pass

```

You should spend some time to go through the free training videos on [Inductive University](https://inductiveuniversity.com/courses/whats-new-in-ignition-81/8.1). There really is a wealth of information and examples available there particularly for vision.

The [manual](https://docs.inductiveautomation.com/display/DOC81) also has a lot of information available to you.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 4, 2021, 5:36pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/7 "2021-03-04T17:36:41Z")

</div>

> [@lrose](#):
>
> A better option here is to utilize a popupMenu to add tags to the list component. Is it as flashy as drag and drop? No probably not, but it is much more easily attainable.

~~While true, I'll also point out that you can use the Table or Power Table as a tag drop target pretty easily.~~  
Huh, I could've sworn we added tag dropping to the tables...

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 4, 2021, 5:41pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/8 "2021-03-04T17:41:09Z")

</div>

Hi, yes I know easy chart and power tabel is easy to use. But my requirement what I mentioned is asked from customer end. For that can you have any idea

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 4, 2021, 5:48pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/9 "2021-03-04T17:48:45Z")

</div>

It is filtered to only show on a “Right” click.

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 4, 2021, 5:49pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/10 "2021-03-04T17:49:33Z")

</div>

OK I have to right click the tag correct?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 4, 2021, 5:49pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/11 "2021-03-04T17:49:38Z")

</div>

Oh, I was thinking of an example I made years ago:

> [@Drag and drop from tag browse tree to power table](http://forum.inductiveautomation.com/t/drag-and-drop-from-tag-browse-tree-to-power-table/15260/3):
>
> Here’s a sample window I came up with a while back. Note that is pretty low-level Java Swing stuff - so you’re on your own merits to figure out how it all works. Also, don’t even try and call into support about this. [Power Table Tags Dropped.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/7/70c831f665ee8ad4a4167c49a595750bf5859a8b.proj) (19.9 KB) For a brief explanation: The initialize() function of the power table fires the addListener() custom method, which creates an instance of a custom [DropTargetListener](https://docs.oracle.com/javase/7/docs/api/java/awt/dnd/DropTargetListener.html). That custom DropTargetListener has an overridden drop() function…

You're welcome to do that, but @lrose is absolutely correct - skipping drag and drop is going to be a lot more maintainable.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 4, 2021, 5:53pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/13 "2021-03-04T17:53:01Z")

</div>

You should be able to right click on any item in the tag tree and it show the popup menu. In the designer you will need to be in preview mode.

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 5, 2021, 12:14pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/15 "2021-03-05T12:14:22Z")

</div>

I tired your project file in my local host, i cant able to move tags from tag tree browser to list in your project file. is there any changes need to be done. can you check and tell me know please

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/20e40cf6f58bf9f4391cf2cd9b4cfaacc4222c82.png)

getting error in 7th line in script

one doubt whether you drag and drop tags from tag browser tree to list component ???

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 5, 2021, 4:54pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/16 "2021-03-05T16:54:22Z")

</div>

> [@paul-griffith](#):
>
> Huh, I could’ve sworn we added tag dropping to the tables…

Perhaps you were correct?

This turned out to be a bit simpler than I was originally thinking. Not trivial, but not really painful either.

Add an extension function to your list component, I called mine addDropListener. Then in the script add the following script:

```auto
from java.awt.dnd import DropTargetAdapter, DropTarget
from com.inductiveautomation.ignition.client.tags.dnd import ListOfQualifiedPath
	
class customDragDropListener(DropTargetAdapter):
	_comp = None
	def __init__ (self,comp):
		DropTargetAdapter. __init__ (self)
		self._comp = comp
			
	def drop(self,e):
		e.acceptDrop(e.getDropAction())
		paths = [[path] for path in e.getTransferable().getTransferData(ListOfQualifiedPath.FLAVOR)]
		self._comp.data = system.dataset.addRows(self._comp.data,paths)
			
ddl = customDragDropListener(self)
DropTarget(self,ddl)

```

Then in the internalFrameActivated Event Handler on the window use the following script

NOTE: You will need to change the path for the component to be valid for your system.

```auto
tagList = system.gui.getParentWindow(event).getComponentForPath('Root Container.List')

if not tagList.getDropTarget():
    tagList.addDropListener()

```

Select any number of tags in the Tag Browse Tree component drop them on the list and they will be appended to the list's dataset. It doesn't validate incoming paths against pre-existing paths so you can add duplicates, if you want this functionality you'll need to add it to the drop function.

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 5, 2021, 6:46pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/18 "2021-03-05T18:46:32Z")

</div>

I will check this scripts and revert you back

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 6, 2021, 6:04am UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/19 "2021-03-06T06:04:22Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/023e562e52cfb3a8b5e03b72c312a58e318337a9.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/2074be84cde1a5e8556cf6784d105d4937ee4bba.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/616c57a68718308ece90362d0bdaf06f28779fc9.png)

I tired your script. when i drag and drop tags from tag tree browser to list.

**its not showing tag path in list, "list is empty"**

Is there any thing to add in script???

please let me know

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 8, 2021, 12:32pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/20 "2021-03-08T12:32:29Z")

</div>

I assumed that you were adding this code to an existing window.

In order for the code to work the List’s dataset needs to have a defined column, which doesn’t happen until you either bind it to something or add a column.

Adding a String Column to your List’s dataset, should correct your issue.

Of course you could check the data property and either create the dataset or add rows to it.

Code which includes a check:

```auto
from java.awt.dnd import DropTargetAdapter, DropTarget
from com.inductiveautomation.ignition.client.tags.dnd import ListOfQualifiedPath
		
class customDragDropListener(DropTargetAdapter):
	_comp = None
	def __init__ (self,comp):
		DropTargetAdapter. __init__ (self)
		self._comp = comp
				
	def drop(self,e):
		e.acceptDrop(e.getDropAction())
		paths = [[path] for path in e.getTransferable().getTransferData(ListOfQualifiedPath.FLAVOR)]
		self._comp.data = system.dataset.addRows(self._comp.data,paths) if self._comp.data.columnCount > 0 else system.dataset.toDataSet(['Selected Tags'],paths)
				
ddl = customDragDropListener(self)
DropTarget(self,ddl)

```

If you make a change to this code, you will need to close the window in the designer in order to re-register the listener to the list component. Another, potentially easier option is to add a temporary button and add script there to register the listener. Otherwise the changes in the script will not take effect.

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 8, 2021, 1:51pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/21 "2021-03-08T13:51:38Z")

</div>

> [@lrose](#):
>
> String Column to your List’s dataset

i used this script and i opened in client window.

still same issue **list is empty** when i drag and drop the tags

is there anything to change?

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 8, 2021, 1:52pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/22 "2021-03-08T13:52:41Z")

</div>

can you share me the project backup with you done this scripting ?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 8, 2021, 1:57pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/23 "2021-03-08T13:57:25Z")

</div>

> [@lrose](#):
>
> In order for the code to work the List’s dataset needs to have a defined column, which doesn’t happen until you either bind it to something or add a column.

Did you add a column to the List's Data property?

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 8, 2021, 1:58pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/24 "2021-03-08T13:58:44Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/17a02d20fa708cbb50a83b2a794c9c84d129cfe9.png)

yes

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 8, 2021, 2:03pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/25 "2021-03-08T14:03:10Z")

</div>

Since you have done that, have you saved, closed the window, and re-opened it?

Does the cursor change to the drop icon when you are over the List?

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [March 8, 2021, 2:04pm UTC](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077/26 "2021-03-08T14:04:24Z")

</div>

yes its changing to drop icon but tag path is not showing in list. pervious script also same issue list is empty even i drag and drop

yes i saved and closed client and opened again and checked too.

[Next page](https://forum.inductiveautomation.com/t/drag-and-drop-to-list-component/44077.md?page=2)