Table Panel inside Group

GoJS
1

Hello,
I want to create a group and add nodes and others groups to it but child nodes and groups need to be in different row and column position so that if a insert more than one elements in one table location, other locations change their width and height accordingly.
what i coded so far is :

             diagram.groupTemplate =                    
                $(go.Group, 'Spot',
                  new go.Binding('row', 'row'),
                  new go.Binding('column', 'column'),
                  $(go.Panel, 'Auto',
                    $(go.Shape, 'Rectangle',
                      new go.Binding('fill', 'fill'),
                      new go.Binding('stroke', 'stroke')),
                    $(go.Panel, 'Table',
                      $(go.Placeholder,
                        {padding: 30})
                     )
                   ),
                  $(go.TextBlock,
                    { alignment: new go.Spot(0.98, 0.02), alignmentFocus: go.Spot.TopRight,
                     font: 'bold 10pt sans-serif'},
                    new go.Binding('text', 'text'))
                 );
            diagram.nodeTemplate =
                $(go.Node, 'Spot',
                  $(go.Shape, 'Rectangle', { fill: 'lightgray' }),
                  $(go.TextBlock,
                    { alignment: new go.Spot(0.95, 0.05), alignmentFocus: go.Spot.TopRight,
                     font: 'bold 10pt sans-serif'},
                    new go.Binding('text', 'key'))
                 );
            diagram.linkTemplate =
                $(go.Link,
                  { routing: go.Link.AvoidsNodes,curve: go.Link.JumpOver},
                  $(go.Shape)
                 );
            diagram.model =
                $(go.GraphLinksModel,
                  { linkFromPortIdProperty: 'fromPort',
                   linkToPortIdProperty: 'toPort',
                   nodeDataArray: [{"key":"wb_env","isGroup":true,"fill":"#bbb","text":"wb_env"},
                                   {"key":"wb_env_left_top","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row": 0,"column":0},
                                   {"key":"wb_env_middle_top","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":0,"column":1},
                                   {"key":"wb_env_right_top","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":0,"column":2},
                                   {"key":"wb_env_left_middle","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":1,"column":0},
                                   {"key":"wb_env_middle_middle","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":1,"column":1},
                                   {"key":"wb_env_right_middle","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":1,"column":2},
                                   {"key":"wb_env_left_bottom","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":2,"column":0},
                                   {"key":"wb_env_middle_bottom","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":2,"column":1},
                                   {"key":"wb_env_right_bottom","group":"wb_env","isGroup":true,"fill":null,"text":"","stroke":"green","row":2,"column":2},
                                   {"key":"wb_m_agent","group":"wb_env_left_top"},
                                   {"key":"wb_mem_sb_0","group":"wb_env_left_top"},
                                   {"key":"m_config","group":"wb_env_left_top"}
                                  ]                      
                  });

and it gives me out put something like this:

but what i want is :

Any idea how i can achieve this ?

2

You’ll need to define your own Diagram.layout to size and position the groups in the manner that you want.

The SwimLanes sample, http://gojs.net/latest/samples/swimlanes.html, has a custom Layout called StackLayout that does this in one dimension. That layout makes sure all of the top-level Groups have the same width (even if they are empty) that is wide enough to hold whatever is in the group, and it arranges them vertically next to each other. It appears that you want to do something like that but in two dimensions.

The SwimLanes sample also has custom resizing abilities for groups, but you might not need any of that stuff.