Positioning inside table layout cell

I have the following structure:
go.Group (Table)

  • go.Panel (Auto)

It is possible to drag and drop nodes from other groups to this group, but I want to show those nodes “inside” the inner Panel, is that possible to achieve? If yes, what is the best way to achieve it?

Does your Group have Placeholder? You can put the Placeholder within your Group where you want using all of the usual panel techniques. GoJS Panels -- Northwoods Software

Layout

The image attached represents the UI that I am trying to achieve, The group is a “Table” and the inner panel where I would like to show the “dropped” nodes is next to the “Static label” Panels. If I add a placeholder inside the inner panel, then it is breaking the styling that I achieved with the Shape. Is there something I am doing wrong?

So you want the member Nodes to be in your Inner Panels, but there is more than one such panel that the user can choose. And a Group can have only one Placeholder.

Is the number of label/inner panel pairs fixed, or will the number of pairs vary?

In either case I think you want the Group.layout to automatically locate all of its member Nodes in the proper Inner Panel, based on information associated with the node.

True, the model for the diagram will have a set of objects for each of the “row” of the main group and the Group.layout currently sets the width as a property of the RowColumnDefinition. I haven’t been able to figure out how I can make the change the Group.layout so that the inner panel is targeted. Any pointer?

Which “inner panel is targeted”? I still don’t understand what you want. What are the different possible results that might be desired?

Maybe you could use TableLayout? How is the “targeting” information provided?

Here is the complete scenario:
It would be possible to drag and drop nodes onto this group and each of these nodes maps to one of the inner panels (you can assume that they have a data entry that can be used to identify a particular panel) what I want to do is to display the node that is dropped onto the group inside the inner panel that it maps to.

So each node knows which Inner Panel it should be in. Might there be an unlimited number of nodes in a particular Inner Panel? How should all of those nodes be laid out within that panel?

Yes, each node has information that can be used to place it inside one of the inner panels. The nodes should be placed vertically in the inner panels and occupy the width of the inner panel.

Why not use nested Groups? You could have one Group be the outer one, as you have envisioned, and each “Inner Panel” would be a separate nested Group, with a Group.layout that was a GridLayout with GridLayout.wrappingColumn set to 1.

Also, it isn’t clear to me why users have to use drag-and-drop when you know ahead of time which inner-panel/group they belong to.

I was not able to add a nested group and wasn’t able to find an example where the nested groups are being used. Can you please point me to one such example?

This even has two different kinds of groups, as shown by its having two Group templates.