Combining Org Chart with Palette for Contacts


I am working on a prototype org chart editor which I would like to combine with palette in a way that unassociated contacts can be dropped from palette to the org chart and vice versa. After reviewing the Pipes example, I am able to drag and drop and associate a contact from the palette onto the org chart, but I am not sure how to properly remove the contact from the palette after it’s been dropped onto the org chart.
I added a ExternalObjectsDropped listener but I am getting a somewhat strange behavior.
What is the recommended way of achieving moving nodes (contacts) from palette to the org chart?
Are there any code samples that might point me in the right direction? Any tips or suggestions?

GoJS looks really promising and I would love to showcase it with this prototype as a very good org chart solution. All comments and suggestions are greatly appreciated.

If you just want to remove from the Palette those Parts that were selected and drag-copied to the main Diagram, you just need to implement:

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) { myPalette.commandHandler.deleteSelection(); });
However for more complicated scenarios, we’ll need to investigate.

Thanks so much for the prompt reply! I think that works OK for palette, going in one direction myPalette --> myDiagram.

What I am also interested is the other way around. Meaning, if palette is for unassociated contacts, and moving them onto the diagram makes the association, how would one go about moving contacts from the diagram back onto the palette? Especially if we try to deal with a node that is a root of a subtree moving from main diagram to the palette?

Any pointers, snippets or documentation would be greatly appreciated.
Thanks once again.

That would be a bit more difficult. We will investigate next week. (BTW, Monday is a holiday here.)

Thanks, Walter. Hope you have a nice Memorial Day weekend!

There are some limitations in version 1.1 for being able to drag between Diagrams in both directions. I believe these limitations will be removed for version 1.2, whose alpha-test will be starting soon.

Thanks, walter!
Please let me know if I can get access to some of the early (alpha/beta) builds/releases. That would be a very useful feature to have and I am very interested in the progress of this feature.
– Boki


Have a look at this sample, which uses new functionality from 1.2:

It allows you to “move” Nodes and Links from one diagram to the other, and the shared undo manager accommodates undo/redo on both Diagrams.

Note that if you want to have the functionality where deleting a Node in one diagram “moves” or “restores” it back to the other Diagram, you’re going to have to add that separately.

Thanks, simon and walter. That indeed looks very promising. I don’t foresee us having such a scenario just yet, but I do like to stay a few steps ahead.


I know this post is old, but I have the same doubt. In my case, there are two palettes and it’s items should be dropped from palette to the chart and vice versa, is there another way to achieve this? Or the only way is:

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {

How can I detect the palette the item is coming from?

There are several possibilities.

You could put information in the data that gets copied, so that you could identify the source Palette.

You could look at the Palettes and see which one has its Diagram.currentTool being an instance of DraggingTool.

You could wait for version 1.6, where the DiagramEvent.parameter for an “ExternalObjectsDropped” DiagramEvent will be the source Diagram.

Thanks for the suggestion!