Issue in panel table to remove empty space or to expand node

GoJS
1

1.Firstly, I am getting empty space on panel table.
this issue raised when panel Item Array Text length is less than main node text.
Before use stretch: go.GraphObject.Fill :
image

After use stretch: go.GraphObject.Fill :
image

2.Secondly, By Applying stretch: go.GraphObject.Fill Extra space is removed
but in case of panel text is larger than main node text, panel text is hiding.

image
image517×736 56.5 KB

how can I resolve text hiding issue?

Code:
Table Panel:
$(go.Panel, “Table”,
{
name: “COLLAPSIBLE”,
padding: 2,
margin: 0,
row: 1,
columnSpan: 2,
itemTemplate: DetailsTemplate,
minSize: new go.Size(100, NaN),
visible: false,
defaultAlignment: go.Spot.Left,
defaultRowSeparatorStroke: go.Brush.lighten(“grey”),
defaultRowSeparatorStrokeWidth: 1,
background: “#fef5d9”,
stretch: go.GraphObject.Fill

        },
        new go.Binding("itemArray", "ruledetails"),
      ),

itemTemplate:
var DetailsTemplate =
$(go.Panel, “TableRow”,
{
row: 1,
columnSpan: 2,
},
new go.Binding(“portId”, “name”),
{
background: UnselectedBrush,
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
fromLinkable: true, toLinkable: true,
click: onFieldClick,
mouseEnter: function (e: any, item: any) {
if (!isFieldSelected(item)) {
item.background = “#dbdbbe”;
}
},
mouseLeave: function (e: any, item: any) {
if (!isFieldSelected(item) && item !== selectedRow) {
item.background = UnselectedBrush;
}
}
},
$(go.TextBlock, new go.Binding(“text”, “rulename”),
{
row: 1, columnSpan: 2, height:16,
font: “14px sans-serif”,
stretch: go.GraphObject.Fill,
overflow: go.TextBlock.OverflowEllipsis,
},),
);

2

Hmmm, we’re looking into this.

3

Ah, one way to fix it is to remove the columnSpan setting. Setting it doesn’t make sense in that template. Also, there’s no point in setting row to anything when it’s in a “TableRow” panel.

Here’s the complete code in which I copied your code and then cleaned it up and removed unrelated properties (such as mouse event handlers). The code works the same in both 2.3.17 and 3.0.9.

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

  <!-- <script src="https://unpkg.com/[email protected]"></script> -->
  <script src="https://unpkg.com/[email protected]"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv");

var DetailsTemplate =
    new go.Panel("TableRow", {
        stretch: go.GraphObject.Horizontal
      })
      .bind("portId", "name")
      .add(
        new go.TextBlock({
            height: 16,
            font: "14px sans- serif",
            stretch: go.GraphObject.Fill,
            overflow: go.TextBlock.OverflowEllipsis
          })
          .bind("text", "rulename")
      );

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape("RoundedRectangle", { fill: "orange", strokeWidth: 0 }),
      new go.Panel("Table")
        .add(
          new go.Panel("Auto", { row: 0, margin: 8, stretch: go.GraphObject.Horizontal })
            .add(
              new go.TextBlock({ stretch: go.GraphObject.Fill })
                .bind("text")
            ),
          new go.Panel("Table", { row: 1,
              stretch: go.GraphObject.Horizontal,
              padding: 2,
              //columnSpan: 2,
              itemTemplate: DetailsTemplate,
              minSize: new go.Size(100, NaN),
              defaultRowSeparatorStroke: go.Brush.lighten("grey"),
              background: "#fef5d9"
            })
            .bind("itemArray", "ruledetails")
          )
    );

myDiagram.model = new go.GraphLinksModel({
  linkFromPortIdProperty: "fid",
  linkToPortIdProperty: "tid",
  nodeDataArray: [
    { key: 1, text: "Alpha Alpha", color: "lightblue",
      ruledetails:
      [
        { name: "1", rulename: "one" },
        { name: "2", rulename: "two" },
        { name: "3", rulename: "table much wider than header" },
      ]
    },
    { key: 2, text: "Header much wider than table", color: "orange",
      ruledetails:
      [
        { name: "0", rulename: "zero" },
        { name: "1", rulename: "one" }
      ]
    },
    { key: 3, text: "min:100", color: "pink",
      ruledetails:
      [
        { name: "0", rulename: "zero" },
        { name: "1", rulename: "one" }
      ]
    }
  ]
});
  </script>
</body>
</html>