Grow nodes in group placeholder horizontally to match size of parent

GoJS
1

Hi, I would like to grow the nodes in a group on the X axis to match the size of the parent.

I’m currently getting output like so:

Group 25
Group 251295×1077 12.4 KB

But the desired output is as such:

Group 26
Group 261295×1077 12.2 KB

I have created a codepen, but for some reason, on this pen, I cannot get the children to add themselves to the parent group. It should be self explanatory to an expert:

Here is the code:

var $$ = go.GraphObject.make;

// Diagram declaration
var myDiagram = $$(go.Diagram, "myDiagramDiv",
{
});

// Node template declaration
myDiagram.nodeTemplate = $$(go.Node, "Auto",
        $$(go.Shape,
            {
                fill: "rgba(0,0,0,.1)", 
                strokeWidth: 0,
                stretch: go.GraphObject.Horizontal,
                cursor: "pointer",
            },
            new go.Binding("fill", "color")
        ),
        $$(go.Panel, "Horizontal",
            $$(go.TextBlock,
                { 
                    margin: 6,
                    font: "normal 11px sans-serif",
                    stroke: "white",
                    cursor: "pointer"
                },
                new go.Binding("text", "title")
            ),
            $$(go.TextBlock,
                { 
                    margin: 6,
                    font: "normal 11px sans-serif",
                    stroke: "white",
                    cursor: "pointer"
                },
                new go.Binding("text")
            )
        )
    )

myDiagram.groupTemplate = $$(go.Group, "Horizontal",
        { layout: $$(go.GridLayout, { 
            wrappingColumn: 1 ,
            cellSize: new go.Size(1, 1), 
            spacing: new go.Size(0, 1)
        }) },
        $$(go.TextBlock,
            { 
                margin: new go.Margin(8, 0, 4, 8), 
                alignment: go.Spot.TopCenter
            },
            new go.Binding("text", "title")
        ),
        $$(go.TextBlock,
            { 
                margin: new go.Margin(8, 0, 4, 8), 
                alignment: go.Spot.TopCenter
            },
            new go.Binding("text")
            // .makeTwoWay()
        ),
        $$(go.Shape,
            {
                strokeWidth: 0,
                portId: "", 
                cursor: "pointer",
            },
            new go.Binding("fill", "color"),
        ),
        $$(go.Panel, "Vertical", 
          
            $$(go.Placeholder,
                { 
                    margin: new go.Margin(0, 8, 8, 8),
                    alignment: go.Spot.Center,
                    padding: 20
                }

            )
        )
    )

// Model declaration
var nodeDataArray = [
  {
     isGroup: true, key: "1", color: "red", text: "Hey", title: "true"
  },
  { group: "1", text: "very long string", title: "hh"},
  { key: "8", group: "1", text: "hello", title: "h"},
];
myDiagram.model = new go.TreeModel(nodeDataArray);

Thank you.

2

If you want to have Groups, you cannot use a TreeModel – you have to use a GraphLinksModel.

I suggest that you use a TableLayout as the Group.layout, so that you can have the layout stretch each member node horizontally.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="go.js"></script>
  <script src="../extensions/TableLayout.js"></script>
  <script id="code">
  function init() {
    var $$ = go.GraphObject.make;

// Diagram declaration
var myDiagram = $$(go.Diagram, "myDiagramDiv",
{
});

// Node template declaration
myDiagram.nodeTemplate = $$(go.Node, "Auto",
        { stretch: go.GraphObject.Horizontal },
        new go.Binding("row"),
        $$(go.Shape,
            {
                fill: "rgba(0,0,0,.1)", 
                strokeWidth: 0,
                stretch: go.GraphObject.Horizontal,
                cursor: "pointer",
            },
            new go.Binding("fill", "color")
        ),
        $$(go.Panel, "Horizontal",
            $$(go.TextBlock,
                { 
                    margin: 6,
                    font: "normal 11px sans-serif",
                    stroke: "white",
                    cursor: "pointer"
                },
                new go.Binding("text", "title")
            ),
            $$(go.TextBlock,
                { 
                    margin: 6,
                    font: "normal 11px sans-serif",
                    stroke: "white",
                    cursor: "pointer"
                },
                new go.Binding("text")
            )
        )
    )

myDiagram.groupTemplate = $$(go.Group, "Horizontal",
        { layout: $$(TableLayout, { }) },
        $$(go.TextBlock,
            { 
                margin: new go.Margin(8, 0, 4, 8), 
                alignment: go.Spot.TopCenter
            },
            new go.Binding("text", "title")
        ),
        $$(go.TextBlock,
            { 
                margin: new go.Margin(8, 0, 4, 8), 
                alignment: go.Spot.TopCenter
            },
            new go.Binding("text")
            // .makeTwoWay()
        ),
        $$(go.Shape,
            {
                strokeWidth: 0,
                portId: "", 
                cursor: "pointer",
            },
            new go.Binding("fill", "color"),
        ),
        $$(go.Panel, "Vertical", 
          
            $$(go.Placeholder,
                { 
                    margin: new go.Margin(0, 8, 8, 8),
                    alignment: go.Spot.Center,
                    padding: 20
                }

            )
        )
    )

    // Model declaration
    var nodeDataArray = [
      {
        isGroup: true, key: "1", color: "red", text: "Hey", title: "true"
      },
      { group: "1", text: "very long string", title: "hh", row: 0},
      { key: "8", group: "1", text: "hello", title: "h", row: 1},
    ];
    myDiagram.model = new go.GraphLinksModel(nodeDataArray);
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
3

Thank you for the help! Unfortunately I am not having a whole lot of luck:

I have copied the code verbatim into this pen:

As you can see the nodes are not being added to the group.

Although they do look like they are stretching, thank you!

Also, in my local solution, the child nodes are overlapping like so:

Screen Shot 2021-09-21 at 9.26.34 PM

Do you know what could cause this. Appreciate it.

4

In your CodePen, it certainly seems like those two gray nodes with white text are in a group. Try moving around either of those two gray nodes.

I guess it depends on what you want your group to look like – in other words how you design your group template. I suggest you look at how they are defined in the documentation pages and in the sample apps for ideas. Also, please read: GoJS Nodes -- Northwoods Software

Your other issue seems to be a different problem. Please provide more details in a separate forum topic.