ScrollingTable scroll bar disappear after scrolling down then up

GoJS
1

Hello,

I have a ScrollingTable, I am able to scroll down and up but, when I click at the down scroll and then I click at the up scroll until the scroll bar dissapear.
Before:
image
After:
image

      var inputFieldTable = [
        { ID: "001", Name: "Input 1", Text: "Err1" },
        { ID: "002", Name: "Input 2", Text: "Err2" },
        { ID: "003", Name: "Input 3", Text: "Err3" },
        { ID: "004", Name: "Input 4", Text: "Err4" },
        { ID: "005", Name: "Input 5", Text: "Err5" },
        { ID: "006", Name: "Input 6", Text: "Err6" }
      ];

      myDiagram = $(go.Diagram, "myDiagramDiv", {
        initialContentAlignment: go.Spot.Center,
        "undoManager.isEnabled": true,
        allowMove: false,
        allowDelete: true,
        allowCopy: false,
        allowDragOut: false,
        allowDrop: false
      });


      var detailtemplate = $(
        go.Node,
        "Vertical",
        {
          selectionObjectName: "SCROLLING",
          resizable: false,
          resizeObjectName: "SCROLLING",
          portSpreading: go.Node.SpreadingNone
        },
        new go.Binding("location").makeTwoWay(),
        $(go.TextBlock, { font: "bold 14px sans-serif" }, new go.Binding("text", "key")),
        $(
          go.Panel,
          "Auto",
          $(go.Shape, { fill: "white" }),
          $(
            "ScrollingTable",
            { stretch: go.GraphObject.Fill },
            new go.Binding("TABLE.itemArray", "items"),
            new go.Binding("TABLE.column", "left", function(left) {
              return left ? 2 : 0;
            }),
            new go.Binding("desiredSize", "size").makeTwoWay(),
            {
              name: "SCROLLING",
              desiredSize: new go.Size(100, 100),
              "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, { stroke: "red", column: 1 }, new go.Binding("text", "Name")) //Ici couleur texte rouge
              ),
              "TABLE.defaultSeparatorPadding": new go.Margin(5, 0)
            }
          )
        )
      );

      var templmap = new go.Map();
      templmap.add("data", detailtemplate);
      myDiagram.nodeTemplateMap = templmap;

      myDiagram.layout = $(go.TreeLayout);

      myDiagram.model = $(go.GraphLinksModel, {
        linkFromKeyProperty: "fromPort",
        linkToKeyProperty: "toPort",
        nodeDataArray: [
          {
            key: "Input",
            left: true,
            location: new go.Point(0, 0),
            size: new go.Size(170, 100),
            items: inputFieldTable,
            category: "data"
          }
        ]
      });

If I add one item to inputFieldTable I don’t have the issue anymore.
Seems like scrolling table need 7 items at least to work properly.

Regards,
Alexia

2

I’m not able to reproduce any problem. Could you please help me reproduce the problem? Here’s my complete sample using your code:

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

    var inputFieldTable = [
      { ID: "001", Name: "Input 1", Text: "Err1" },
      { ID: "002", Name: "Input 2", Text: "Err2" },
      { ID: "003", Name: "Input 3", Text: "Err3" },
      { ID: "004", Name: "Input 4", Text: "Err4" },
      { ID: "005", Name: "Input 5", Text: "Err5" },
      { ID: "006", Name: "Input 6", Text: "Err6" }
    ];

    myDiagram = $(go.Diagram, "myDiagramDiv", {
      initialContentAlignment: go.Spot.Center,
      "undoManager.isEnabled": true,
      allowMove: false,
      allowDelete: true,
      allowCopy: false,
      allowDragOut: false,
      allowDrop: false
    });

    var detailtemplate = $(go.Node, "Vertical",
      {
        selectionObjectName: "SCROLLING",
        resizable: false,
        resizeObjectName: "SCROLLING",
        portSpreading: go.Node.SpreadingNone
      },
      new go.Binding("location").makeTwoWay(),
      $(go.TextBlock, { font: "bold 14px sans-serif" },
        new go.Binding("text", "key")),
      $(go.Panel, "Auto",
        $(go.Shape, { fill: "white" }),
        $("ScrollingTable",
          { stretch: go.GraphObject.Fill },
          new go.Binding("TABLE.itemArray", "items"),
          new go.Binding("TABLE.column", "left", function(left) {
            return left ? 2 : 0;
          }),
          new go.Binding("desiredSize", "size").makeTwoWay(),
          {
            name: "SCROLLING",
            desiredSize: new go.Size(100, 100),
            "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", "ID"),
              $(go.TextBlock, { stroke: "red", column: 1 },
                new go.Binding("text", "Name")) //Ici couleur texte rouge
            ),
            "TABLE.defaultSeparatorPadding": new go.Margin(5, 0)
          }
        )
      )
    );

    var templmap = new go.Map();
    templmap.add("data", detailtemplate);
    myDiagram.nodeTemplateMap = templmap;

    myDiagram.layout = $(go.TreeLayout);

    myDiagram.model = $(go.GraphLinksModel, {
      linkFromKeyProperty: "fromPort",
      linkToKeyProperty: "toPort",
      nodeDataArray: [
        {
          key: "Input",
          left: true,
          location: new go.Point(0, 0),
          size: new go.Size(170, 100),
          items: inputFieldTable,
          category: "data"
        }
      ]
    });
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
3

Hi Walter, thanks for your answer.

I copy past your code in my Vuejs project and I still have the issue.
Maybe it’s because of Vue? I am using Vue.js (v2.6.10)

Here my total VueJS file:

<template>
  <div id="map-page">
    <section class="section">
      <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
    </section>
  </div>
</template>

<script>
import go from "gojs";
import * as ScrollingTable from "gojs/extensions/ScrollingTable";

export default {
  methods: {
  init() {
      var $ = go.GraphObject.make;

      var inputFieldTable = [
        { ID: "001", Name: "Input 1", Text: "Err1" },
        { ID: "002", Name: "Input 2", Text: "Err2" },
        { ID: "003", Name: "Input 3", Text: "Err3" },
        { ID: "004", Name: "Input 4", Text: "Err4" },
        { ID: "005", Name: "Input 5", Text: "Err5" },
        { ID: "006", Name: "Input 6", Text: "Err6" }
      ];

      let myDiagram = $(go.Diagram, "myDiagramDiv", {
        initialContentAlignment: go.Spot.Center,
        "undoManager.isEnabled": true,
        allowMove: false,
        allowDelete: true,
        allowCopy: false,
        allowDragOut: false,
        allowDrop: false
      });

      var detailtemplate = $(go.Node, "Vertical",
        {
          selectionObjectName: "SCROLLING",
          resizable: false,
          resizeObjectName: "SCROLLING",
          portSpreading: go.Node.SpreadingNone
        },
        new go.Binding("location").makeTwoWay(),
        $(go.TextBlock, { font: "bold 14px sans-serif" },
          new go.Binding("text", "key")),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "white" }),
          $("ScrollingTable",
            { stretch: go.GraphObject.Fill },
            new go.Binding("TABLE.itemArray", "items"),
            new go.Binding("TABLE.column", "left", function(left) {
              return left ? 2 : 0;
            }),
            new go.Binding("desiredSize", "size").makeTwoWay(),
            {
              name: "SCROLLING",
              desiredSize: new go.Size(100, 100),
              "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, { stroke: "red", column: 1 },
                  new go.Binding("text", "Name")) //Ici couleur texte rouge
              ),
              "TABLE.defaultSeparatorPadding": new go.Margin(5, 0)
            }
          )
        )
      );

      var templmap = new go.Map();
      templmap.add("data", detailtemplate);
      myDiagram.nodeTemplateMap = templmap;

      myDiagram.layout = $(go.TreeLayout);

      myDiagram.model = $(go.GraphLinksModel, {
        linkFromKeyProperty: "fromPort",
        linkToKeyProperty: "toPort",
        nodeDataArray: [
          {
            key: "Input",
            left: true,
            location: new go.Point(0, 0),
            size: new go.Size(170, 100),
            items: inputFieldTable,
            category: "data"
          }
        ]
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

I also saw same issue on this forum : Scrolling Table - #5 by jose_vi

image
image750×205 9.65 KB

But the issue was not solved.

Regards

4

The GoJS library does not depend on any framework, so code should be able to run independently from the framework.

In that forum topic, I thought it was clear that once loading the code was done correctly, the code worked.

Which version of GoJS are you using?

5

Then I don’t understand why I am still facing this issue…
I am using version 2.1.20

6

That version of GoJS seems to have a bug when the user tries to draw a new link when there are multiple and variable ports like what you have. Please update to the latest version.

I am still unable to reproduce the problem that you are reporting. (I did change my “portId” Binding to use the “ID” item data property instead of “Name”, but that does not affect the “ScrollingTable”.)