Arranging variable number of ports into multiple rows

Hi Walter
here I am also looking for dynamic creation of ports.

  • I don’t have a fix numbers of ports and its data for each of node.

  • a number of port for each node can be vary from 2 to 60 may be more.

  • in node I want to make a raw of ports dynamically base on its quantity. suppose single raw can contain 8 ports. so base on count it will increase number of raw.

  • ports should be start with center of node.


here I am able to create all the ports in single raw. how can I achieve multiple raw with it?

if I am increasing ports it looks like this


I hope you understand my point.

here I am able to create all the ports in single raw. **

how can I achieve multiple raw of ports with it?


In what kind of Panel are those ports? It appears as if they are in a “Horizontal” Panel. That kind of panel only arranges its elements in a single horizontal row.

I suggest that you change that to be a “Table” Panel. On each element set or bind its GraphObject.row and column.

I use Table Panel.

 $(go.Panel, 'Table',
        stretch: go.GraphObject.Fill
        new go.Binding('itemArray', 'ports'),
            $(go.Panel, {
              row: 1,
              fromLinkable: true, toLinkable: true, cursor: 'pointer',
              toMaxLinks: 1,
              fromMaxLinks: 1,
              _side: 'center',
              new go.Binding('portId', 'portId'),
              $(go.Shape, 'Rectangle',
                  stroke: null, strokeWidth: 0,
                  desiredSize: new go.Size(15, 15),
                  margin: new go.Margin(0, 5)

and port JSON array is

{ "ports": [
  "portId": "BD1",
  "port_order": "1"
  "portId": "BD2",
  "port_order": "2"
  "portId": "3",
  "port_order": "3"
  "portId": "4",
  "port_order": "4"
  "portId": "PS1",
  "port_order": "5"
  "portId": "PS2",
  "port_order": "6"
}  ]}

using this panels I get single port on node.


instead of six port consider there is 48 ports how can i divide ports in number of raw.

You specified that every port is in row 1 and column 0. (The default row and the default column are each zero.) So that is why all of your ports are in the same cell in the Table Panel.

I suspect you want to have a Binding on “row” and a Binding on “column”, each with a conversion function that converts the “port_order” property to a row value or to a column value, respectively.

  new go.Binding("row", "port_order", function(i) { return Math.floor(i / 8); }),
  new go.Binding("column", "port_order", function(i) { return i % 8; }),

Why do you have the “port_order” data property be a string rather than a number? In the code above I assumed the value would be a zero-based number.

Read more about “Table” Panels at

Hi Walter,
Thanks for response.
yes you are correct with raw and column binding it works for me. Thanks a lot.

A post was split to a new topic: Positioning ports without using Spots

can we add/ remove a ports on node resizing?
when we resize a node so base on node height and width number of port will be updated.


Yes, you could add/remove items to/from a data Array in a “PartResized” DiagramEvent listener.

Thanks @walter.