Gojs + 2 scrolling table inside card giving wrong thumb for one scroller

[Midhun]

$(
      go.Node,
      'Auto',
 $(go.Shape, { fill: 'white', stroke: '#F4F4F4', name: 'SHAPE', maxSize: new go.Size(271, 1300) }),
      $(
        go.Panel,
        'Vertical',
        $(
          go.Panel,
          'Table',
      $(
          //go.Panel,
          'ScrollingTable',
          {
            name: 'MAJOR',
            stretch: go.GraphObject.Fill,
            defaultAlignment: go.Spot.Left,
            defaultColumnSeparatorStroke: 'gray',
            defaultRowSeparatorStroke: 'gray',
            maxSize: new go.Size(271, 130),
          },
          new go.Binding('TABLE.itemArray', 'operations'),
          {
            'TABLE.itemTemplate': $(
              go.Panel,
              'TableRow',
              // this Panel is a row in the containing Table
              new go.Binding('portId', 'id'), // this Panel is a "port"
              {
                fromSpot: go.Spot.LeftRightSides,
                toSpot: go.Spot.LeftRightSides,
              },
              $(
                go.Panel,
                'Vertical',
                { width: 256, height: 60, background: '#F4F4F4' },

                $(
                  go.TextBlock,
                  {
                    column: 1,
                    stroke: '#161616',
                    alignment: go.Spot.Left,
                    margin: new go.Margin(22, 5, 5, 18),
                  },
                  new go.Binding('text', 'name'),
                  new go.Binding('visible', '', function (node) {
                    return node.operations.length > 0;
                  })
                )
              )
            ),
            'TABLE.defaultRowSeparatorStroke': 'white',
            'TABLE.defaultRowSeparatorStrokeWidth': 3,
            'TABLE.background': 'white',
            'TABLE.defaultSeparatorPadding': new go.Margin(1, 5, 1, 5),
          }
        ),
        $(
          go.Panel,
          'Table',
    $(
          //go.Panel,
          'ScrollingTable',
          {
            name: 'PROPERTIES',
            stretch: go.GraphObject.Fill,
            defaultAlignment: go.Spot.Left,
            defaultColumnSeparatorStroke: 'gray',
            defaultRowSeparatorStroke: 'gray',
            width: 271,
            margin: new go.Margin(0, 0, 5, 0),
          },
          new go.Binding('visible', 'properties', (arr) => arr.length > 0),
          new go.Binding('TABLE.itemArray', 'properties'),
          {
            'TABLE.itemTemplate': $(
              go.Panel,
              'TableRow',
              // this Panel is a row in the containing Table
              new go.Binding('portId', 'id'), // this Panel is a "port"
              {
                fromSpot: go.Spot.LeftRightSides,
                toSpot: go.Spot.LeftRightSides,
                // allow drawing links from or to this port:
                fromLinkable: true,
                toLinkable: true,
                fromLinkableDuplicates: true,
              },
              $(
                go.Panel,
                'Vertical',
                { width: 256, height: 60, background: '#F4F4F4' },
                $(
                  go.Panel,
                  'Horizontal',
                  { stretch: go.GraphObject.Horizontal },
                  $(
                    go.Panel,
                    'Horizontal',
                    { stretch: go.GraphObject.Horizontal },
                    $(
                      go.Picture,
                      {
                        width: 25,
                        height: 25,
                        column: 0,
                        source: `assets/img/warning.svg`,
                        margin: new go.Margin(16, 13, 2, 18),
                        imageAlignment: go.Spot.Right,
                        name: 'ErrorIcon',
                        visible: false,
                      },
                      new go.Binding('visible', '', function (data) {
                        return data.error;
                      })
                    ),
                    $(
                      go.Picture,
                      {
                        width: 25,
                        height: 25,
                        column: 0,
                        source: `/img/warning--alt.svg`,
                        margin: new go.Margin(16, 13, 2, 18),
                        imageAlignment: go.Spot.Right,
                        name: 'WarningIcon',
                        visible: false,
                      },

                    )
                  ),
                  $(
                    go.TextBlock,
                    { stretch: go.GraphObject.Horizontal },
                    {
                      column: 1,
                      stroke: '#161616',
                      alignment: go.Spot.Left,
                      margin: new go.Margin(15, 5, 5, 18),
                    },
                    new go.Binding('text', 'name'),
                    {
                      // define a tooltip for each node that displays the error or warning message
                      toolTip: $(
                        'ToolTip',
                        new go.Binding('visible', '', function (data) {
                          return data.error || data.warning;
                        }),
                        $(
                          go.TextBlock,
                          new go.Binding('text', '', function (data) {
                            return data.error ? data.message : data.warning ? data.message : '';
                          })
                        )
                      ), // end of Adornment
                    }
                  )
                ),
                $(
                  go.TextBlock,
                  { stretch: go.GraphObject.Horizontal },
                  {
                    column: 2,
                    stroke: '#525252',
                    alignment: go.Spot.Left,
                    margin: new go.Margin(-1, 5, 5, 18),
                  },
                  new go.Binding('width', 'desiredSize').makeTwoWay(),
                  new go.Binding('text', '', function (data) {
                    return data.value
                  }),
                  new go.Binding('margin', '', function (data) {
                    if (data.error || data.warning) {
                      return new go.Margin(-4, 5, 5, 50);
                    } else return new go.Margin(-2, 5, 5, 18);
                  }),
                  {
                    // define a tooltip for each node that displays the color as text
                    toolTip: $(
                      'ToolTip',
                      $(
                        go.TextBlock,
                        new go.Binding('text', '', function (data) {
                          return data.value
                        })
                      )
                    ), // end of Adornment
                  }
                )
              )
            ),
            'TABLE.defaultRowSeparatorStroke': 'white',
            'TABLE.defaultRowSeparatorStrokeWidth': 3,
            'TABLE.background': 'white',
            'TABLE.defaultSeparatorPadding': new go.Margin(1, 5, 1, 5),
          }
        )

This is the layout , any issues with layout , may be some closure braces you might be missing , but i want to show you this is the way we structured

[walter]

It’s hard for me to read, but it seems that around each “ScrollingTable” Panel you have a “Table” Panel with nothing else in it. Is that what you have? Why do you need those extra “Table” Panels? That just imposes unnecessary overhead and makes it harder to understand what’s going on.

In other words, why isn’t it:

Node, "Auto"
  Shape
  Panel, "Table"
    "ScrollingTable", row: 0
    "ScrollingTable", row: 1

As far as your issue is concerned, you have the height of each of the “ScrollingTable” Panels stretch, but there’s nothing for those panels to stretch to. Is there a reason you aren’t setting a fixed height on each one? Or on the outer “Table” Panel, as I’ve configured it above?

[Midhun]

Around each scrolling table panel have a table panel, which do have textblock,PanelExpanderButton and all. I had removed all those things

        $(
          go.Panel,
          'Table',
          {
            background: 'grey',
            stretch: go.GraphObject.Horizontal,
            height: 48,
            name: 'PROPERTIES-HEADER',
            margin: new go.Margin(0, 0, 4, 0),
            row: 1,
          },
          $(go.TextBlock, 'Properties', {
            column: 2,
            margin: new go.Margin(2, 0, 2, 12),
            alignment: go.Spot.Center,
          }),

          $(
            go.TextBlock,
            {
              column: 3,
              visible: false,
            },
            new go.Binding('text', '', function (node) {
              return '( ' + node.properties.length + ' )';
            }),
            new go.Binding('visible', 'properties', (arr) => arr.length > 0)
          ),

          $(
            'PanelExpanderButton',
            'PROPERTIES',
            { column: 1, alignment: go.Spot.Right, visible: false, margin: new go.Margin(2, 0, 2, 8) },
          )
        ),
//start scrolling table
  $(
          //go.Panel,
          'ScrollingTable',
          {
            name: 'PROPERTIES',
            stretch: go.GraphObject.Fill,
            defaultAlignment: go.Spot.Left,
            defaultColumnSeparatorStroke: 'gray',
            defaultRowSeparatorStroke: 'gray',
            width: 271,
            margin: new go.Margin(0, 0, 5, 0),
          },
 new go.Binding('TABLE.itemArray', 'properties'),
          {
            'TABLE.itemTemplate': $(
              go.Panel,
              'TableRow',
              $(
                go.Panel,
                'Vertical',
                { width: 256, height: 60, background: '#F4F4F4' },
                 $(
                    go.TextBlock,
                    { stretch: go.GraphObject.Horizontal },
                    {
                      column: 1,
                      stroke: '#161616',
                      alignment: go.Spot.Left,
                      margin: new go.Margin(15, 5, 5, 18),
                    },
                    new go.Binding('text', 'name'),
)
)

This is how it looks

[walter]

So which object(s) are each of the “ScrollingTable” Panels supposed to stretch to, horizontally and (independently) vertically?

[Midhun]

it wont be stretching horizontally , but its stretching verticaly if you keep scrolling up and down using mouse wheel
Again there is an option to add new property and when you add new , it should be stretched vertically to acomodate that
@walter

[walter]

You set stretch: go.GraphObject.Fill which means that you want that object (the “ScrollingTable” Panel) to stretch to the total width of some object(s) that are siblings in the same panel and to the total height of some object(s) in that same panel (a “Table” Panel in your case).

Maybe you don’t want it to stretch vertically to fill the containing “Table” Panel? Use stretch: go.GraphObject.Horizontal?

[Midhun]

no luck
Already table is having

stretch: go.GraphObject.Horizontal,

if you try from you side are you facing no issues in the example given above

@walter

[Midhun]

@walter

<!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:600px"></div>

  <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",
    {
      "PartResized": e => {
        const table = e.subject.findObject("SCROLLER2");
        if (table && table._updateScrollBar) table._updateScrollBar(table);
      },
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    {
      selectionObjectName: "BODY",
      resizable: true, resizeObjectName: "BODY"
    },
    $(go.TextBlock, { font: "bold 12pt sans-serif" },
      new go.Binding("text")),
    $(go.Panel, "Auto",
      { name: "BODY", width: 200, height: 200 },
      $(go.Shape,
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.Panel, "Table",
        { stretch: go.GraphObject.Fill, defaultStretch: go.GraphObject.Horizontal },
        $("ScrollingTable",
          {
            name: "SCROLLER1",
            row: 0,
            maxSize: new go.Size(NaN, 50),
            alignment: go.Spot.Top,
            defaultStretch: go.GraphObject.Horizontal,
            defaultColumnSeparatorStroke: "gray",
            defaultColumnSeparatorStrokeWidth: 0.5
          },
          new go.Binding("TABLE.itemArray", "items1"),
          new go.Binding("TABLE.column", "left", function(left) { return left ? 2 : 0; }),
          {
            "TABLE.itemTemplate":
              $(go.Panel, "TableRow",
                {
                  defaultStretch: go.GraphObject.Horizontal,
                  fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
                  fromLinkable: true, toLinkable: true
                },
                new go.Binding("portId", "name"),
                $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                $(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
              ),
            "TABLE.defaultColumnSeparatorStroke": "gray",
            "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
            "TABLE.defaultRowSeparatorStroke": "gray",
            "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
            "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
          }
        ),
        $(go.RowColumnDefinition, { row: 1, sizing: go.RowColumnDefinition.None }),
        $(go.Shape, "LineH", { row: 1, height: 0, stretch: go.GraphObject.Horizontal }),
        $("ScrollingTable",
          {
            name: "SCROLLER2",
            row: 2,
            stretch: go.GraphObject.Fill,
            defaultStretch: go.GraphObject.Horizontal,
            defaultColumnSeparatorStroke: "gray",
            defaultColumnSeparatorStrokeWidth: 0.5
          },
          new go.Binding("TABLE.itemArray", "items2"),
          new go.Binding("TABLE.column", "left", function(left) { return left ? 2 : 0; }),
          {
            "TABLE.itemTemplate":
              $(go.Panel, "TableRow",
                {
                  defaultStretch: go.GraphObject.Horizontal,
                  fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
                  fromLinkable: true, toLinkable: true
                },
                new go.Binding("portId", "name"),
                $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                $(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
              ),
            "TABLE.defaultColumnSeparatorStroke": "gray",
            "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
            "TABLE.defaultRowSeparatorStroke": "gray",
            "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
            "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
          }
        )
      )
    )
  );

const alpha = { key: 1, text: "Alpha", items1: [], items2: [] };
for (let i = 0; i < 4; i++) alpha.items1.push({ name: i.toString(), value: "item " + i});
for (let i = 100; i < 130; i++) alpha.items2.push({ name: i.toString(), value: "item " + i});

const beta = { key: 2, text: "Beta", items1: [], items2: [] };
for (let i = 0; i < 4; i++) beta.items1.push({ name: i.toString(), value: "item " + i});
for (let i = 100; i < 130; i++) beta.items2.push({ name: i.toString(), value: "item " + i});

myDiagram.model = new go.GraphLinksModel({
  linkFromPortIdProperty: "fpid",
  linkToPortIdProperty: "tpid",
  nodeDataArray: [
    alpha,
    beta
  ],
  linkDataArray: [
    { from: 1, fpid: "112", to: 2, tpid: "103" }
  ]
});
  </script>
</body>
</html>

Also checked the example you had given , there is no mouse wheel scroll up and down as well.
Issue happens when you try to scroll up using mouse wheel up and down
@walter

[Midhun]

I came to know that if i give a height to scrolling table with either in maxSize or height , it will get restricted , no more height gets added dynamically on mouse wheel scroll up and down. But i cant set a height blindly , since there might be scenarios nodes with 0 properties , hence height will be there with no values. Hence Binding with height is not working , i thought to give binding to height based on properties , but thats not working
Any way to set height dynamically binding fro scrolling table @walter

[walter]

My simple sample app doesn’t have that override of ToolManager.doMouseWheel that the extensions sample has and that your app presumably has. That shouldn’t affect the sizing behavior as the user scrolls one of the scrollbars in the "ScrollingTable"s.

If in my sample I remove the setting of the maximum height (maxSize: new go.Size(NaN, 50)) of the top “ScrollingTable”, I do find that it changes height as the number of visible rows changes. I can look into that. But the total height of the panel holding both scrolling tables does not change, because its height remains fixed.

[walter]

Ah, I found what might be the bug that you are seeing. If you want to try it in your copy of the ScrollingTable extension, change this line:

      thumb.height = Math.max((rows / table.rowCount) * availh, Math.min(availh, 10));

to be this instead:

      thumb.height = Math.max((rows / table.rowCount) * availh, Math.min(availh, 10)) - (thumb instanceof go.Shape ? thumb.strokeWidth : 0);

This will also be in the next release.