How to stop the links to the empty space in scrolling table

GoJS
#1

While scrolling the rows, the links seems to be pointing to the empty space as we are increasing the rows.
we are looking forward for any solution which would rectify this problem.

Script:

function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this
var $ = go.GraphObject.make;

myDiagram =
  $(go.Diagram, "myDiagram",
    { initialContentAlignment: go.Spot.Center,
      // layout: $(go.TreeLayout,
      //               { angle: 0, sorting: go.TreeLayout.SortingAscending })
     });
  //    myDiagram.toolManager.mouseDownTools.add(new RowResizingTool());
  // myDiagram.toolManager.mouseDownTools.add(new ColumnResizingTool());

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
       new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    {
      selectionObjectName: "SCROLLING",
      resizable: true,
      resizeObjectName: "SCROLLING"
    },
    $(go.TextBlock,
      { font: "bold 14px sans-serif" },
      new go.Binding("text", "key")),
      // $(go.Shape, { fill: "white" }),
      $("ScrollingTable",
        new go.Binding("TABLE.itemArray", "items"),
        {
          name: "SCROLLING",
          desiredSize: new go.Size(NaN, 60),
          "TABLE.itemTemplate":$(go.Panel, "TableRow", new go.Binding("portId", "name"), { background: "transparent",
              fromSpot: go.Spot.Right,
              toSpot: go.Spot.Left,
              fromLinkable: true, toLinkable: true },
              $(go.TextBlock, {
              column: 2,
              margin: new go.Margin(0, 2),
              stretch: go.GraphObject.Horizontal,
              font: "bold 13px sans-serif",
              wrap: go.TextBlock.None,
              overflow: go.TextBlock.OverflowEllipsis,
              fromLinkable: false, toLinkable: false
          }, new go.Binding("text", "name"))),

          "TABLE.defaultColumnSeparatorStroke": "gray",
          "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
          "TABLE.defaultRowSeparatorStroke": "gray",
          "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
          "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
        }
      )

  );
// myDiagram.model = new go.GraphLinksModel(,);

myDiagram.model =
    this.$(go.GraphLinksModel, { linkFromPortIdProperty: "fromPort",
        linkToPortIdProperty: "toPort",
        nodeDataArray: [
          { key: "Alpha", items:
            [
              { name: "A", value: 1 },
              { name: "B", value: 2 },
              { name: "C", value: 3 },
              { name: "D", value: 4 },
              { name: "E", value: 5 },
              { name: "F", value: 6 },
              { name: "G", value: 7 }
            ]
          },
          {
            key: "Beta", items:
            [
              { name: "Aa", value: 1 },
              { name: "Bb", value: 2 },
              { name: "Cc", value: 3 },
              { name: "Dd", value: 4 },
              { name: "Ee", value: 5 },
              { name: "Ff", value: 6 },
              { name: "Gg", value: 7 },
              { name: "Hh", value: 8 },
              { name: "Ii", value: 9 },
              { name: "Jj", value: 10 },
              { name: "Kk", value: 11 },
              { name: "Ll", value: 12 },
              { name: "Mm", value: 13 },
              { name: "Nn", value: 14 }
            ]
          }
        ]
    });

}

#2

What behavior would you want?

As an example of a tree structure supporting collapsing, rather than a simple list structure supporting scrolling: http://gojs.net/beta/samples/treeMapper.html

#3

we would like all the links to stop pointing at the endpoint so that they will not point at the empty space.
it already has this towards the top of the table we want it the same way towards the bottom of the table.
This is the sample of behavior we would like to have :

#4

OK, that makes sense. We can work on that, although it’s been pretty busy, so I’m not sure how long it will take.

#5

Although I did not use your code, I reproduced the situation. I found that the problem is nowhere near as bad as what you depicted. You can see what I tried at [EDIT: now an extension] http://gojs.net/latest/extensions/ScrollingTable.html.

Basically, there is still a problem in that links connecting with ports that have scrolled beyond the end of the Panel appear to connect with nowhere. But that distance is limited to be about the height of one row.

So we need to improve that, but in the meantime it’s not too bad. Still, I’m curious what version of GoJS you are using. Maybe upgrading to the latest version would help.

#6

I want to collapse the table(contain scrolling bars) when the button is clicked. Is it possible.
Please provide me a sample code for the that.

#7

Yes, you can use a “PanelExpanderButton” in your template. Search the samples for uses of that kind of button. I think the IVRtree and umlClass samples use it.

If you are curious about how the “PanelExpanderButton” panel is defined, you can find its definition in extensions/Buttons.js.

How to expand/collapse all panels in the diagram programatically?
#8

Hi Walter
I was constructed the scrolling table with the “PanelExpanderButton”.its working good but
I want to collapse all scrolling tables at a time when some button(expandAll And collapseAll) is clicked.
Please provide me sample code

#9

Is this the same question as How to expand/collapse all panels in the diagram programatically? ? If so, I’ll answer there.

#10

no that is not the same question,
am expecting the behaviour as on expand all the panels should expand at a time and on collapse they have to collapse single time. the same thing is given in the following figures for your reference.

Pasted image792×248 21.7 KB

Pasted image972×374 12.9 KB

#11

It seems the same question to me. My answer for this question is given in that other topic.