Height not increasing when itemarray is added with new value

GoJS
1

hi,
I have a node with Auto panel which has a table panel inside(scrollable table) . I would like the height of the node to increase when we add more items to the itemarray, (ie, when more rows get added to the table).
i have given maxsize to the parent panel, when the page initial loads it takes up height according to the number of items. the height goes until max height. This works fine when page is loaded.
But after page load if i add a new item, it gets added to the table, but the height of the node remains same.As it is scrollable, we are able to see the added item if we scroll. But I would require the height to increase accordingly until it reaches max height.

go.Node,
      'Auto',
      nodeStyle(),
      {
        stretch: go.GraphObject.Fill,
        locationObjectName: 'SHAPE',
        resizeObjectName: 'SHAPE',
        
      },
      $(go.Shape, { fill: 'white', name: 'SHAPE', maxSize: new go.Size(271, 800) }),
      // the content consists of a header and a list of items
      $(
        go.Panel,
        'Vertical',
        { stretch: go.GraphObject.Fill, minSize: new go.Size(271, 96), alignment: go.Spot.TopLeft },
        $(
          go.Panel,
          'Table',
        $(
          //go.Panel,
          'ScrollingTable',
          {
            name: '',
            stretch: go.GraphObject.Fill,
            defaultAlignment: go.Spot.Left,
            defaultColumnSeparatorStroke: 'gray',
            defaultRowSeparatorStroke: 'gray',
            width: 271,
          },
          
          new go.Binding('TABLE.itemArray', 'pr'),
         
          {}
        )
      )
2

Is the natural height of the panel after adding an item still less than the maximum height (actually maxSize)? If so, then it should get taller.

But if the user has resized the table, then it has a specific height (actually desiredSize), and it will keep that height until the user resizes it or until your code changes it.

3

yes, it is still less than the max height. As of now we have not added resizable true.

4

It works as I think you expect:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <button id="myTestButton">Test</button>

  <script src="https://unpkg.com/gojs"></script>
  <script src="https://unpkg.com/gojs/extensions/ScrollingTable.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    {
      selectionObjectName: "SCROLLER",
      resizable: true, resizeObjectName: "SCROLLER",
    },
    $(go.TextBlock,
      { font: "bold 14px sans-serif" },
      new go.Binding("text")),
    $(go.Panel, "Auto",
      $(go.Shape, { fill: "white" }),
      $("ScrollingTable",
        {
          name: "SCROLLER",
          //width: 100, height: 120,      // initial size
          stretch: go.GraphObject.Fill  // but stretches vertically
        },
        new go.Binding("TABLE.itemArray", "items"),
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        {
          "TABLE.itemTemplate":
            $(go.Panel, "TableRow",
              { defaultStretch: go.GraphObject.Horizontal },
              $(go.Panel, "Table",
                { margin: 1, fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides },
                new go.Binding("portId", "id"),
                $(go.RowColumnDefinition, { row: 0, background: "lightgray" }),
                $(go.TextBlock,
                  new go.Binding("text", "name"))
              )
            )
        }
      )
    )
  );

const nodes = [
  { key: 1, text: "Header 1", items: [] }
];
nodes.forEach(data => {
  for (let i = 0; i < 6; i++) {
    data.items.push({ id: i, name: "item " + i.toString() });
  }
});
myDiagram.model = new go.GraphLinksModel(nodes, [],
  {
    linkFromPortIdProperty: "fpid",
    linkToPortIdProperty: "tpid"
  });
  
document.getElementById("myTestButton").addEventListener("click", e => {
    const node = myDiagram.nodes.first();
    node.diagram.model.commit(m => {
      const i = node.data.items.length;
      m.addArrayItem(node.data.items, { id: i, name: "new " + i.toString() });
    });
  });
  </script>
</body>
</html>