Adding ports to table content

My node template is as follows

$(go.Node, “Table”,
{ locationObjectName: “BODY”,
locationSpot: go.Spot.Center,
selectionObjectName: “BODY”,
$(go.Adornment, “Auto”,
$(go.Shape, “Rectangle”,
{ stroke: “dodgerblue”,
strokeWidth: 3,
fill: null }),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),

// the body
$(go.Panel, “Auto”,
{ row: 1, column: 1, name: “BODY”,
stretch: go.GraphObject.Fill },
$(go.Shape, “Rectangle”,
{ fill: bluegrad,
minSize: new go.Size(56, 56) }),
{ margin: 10, textAlign: “center”,isMultiline:true, wrap:go.TextBlock.WrapFit,width: 80 },
new go.Binding(“text”, “maintext”)),
{ margin: 10, textAlign: “center”,visible:false },
new go.Binding(“type”, “type”))
), // end Auto Panel body

// the Panel holding the left port elements, which are themselves Panels,

$(go.Panel, “Vertical”,
{ row:1, column:2,
alignment: go.Spot.Left
$(“Button”, // button A
click: buttonExpandCollapse, fromLinkable: true, toLinkable: true, toSpot: go.Spot.Right,cursor: “pointer”
new go.Binding(“name”, “name”),
new go.Binding(“portId”, “portId”),
makePort(“R”, go.Spot.Right, true, true),
new go.Binding(“text”, “text”)),
new go.Binding(“nodekey”, “nodekey”),
new go.Binding(“operatorValue”, “operatorValue”),
new go.Binding(“nodekey2”, “nodekey2”))

) // end button A

) // end itemTemplate
new go.Binding(“itemArray”, “nodeArray”),
new go.Binding(“sourceBT”, “sourceBT”),
new go.Binding(“targetArray”, “targetArray”)
) ,
// ,end Horizontal Panel
{ name:“terminalTextBlock”,row:1, column:3,visible:false,width: 100, wrap: go.TextBlock.WrapDesiredSize,isMultiline:true, },
new go.Binding(“text”, “terminalText”)),
makePort(“L”, go.Spot.Left, true, true)// end Auto Panel body

)); // end Node

On click of “node0” in start node it will automatically create a node and link as done in decision tree . how can i manually connect each node to another node eg: node0 to terminal.

I want two ports one on RHS of node0 another on LHS of start node.

tried by creating make port function but it doesnt seem to work please help

You need to create link data and set the relevant properties:

var model = myDiagram.model;

var linkdata = {};
linkdata[model.linkFromKeyProperty] = // the from key, ie model.getKeyForNodeData(fromData);
linkdata[model.linkToKeyProperty] = //the to key, ie model.getKeyForNodeData(toData);
linkdata[model.linkFromPortIdProperty] = // the name of the from port, ie “L”
linkdata[model.linkToPortIdProperty] = // the name of the to port, ie “R”
// and add the link data to the model

var model = $(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });
var newlink = { from:,fromport:portid,toport:newnode.key, to: newnode.key};
// add the new link to the model

I have defined the above properties . Manually in the sense using mouse pointer .

function makePort(name, spot, output, input) {
return $(go.Shape,
figure: “Circle”,
fill: “transparent”,
stroke: null,
desiredSize: new go.Size(6, 6),
alignment: spot, alignmentFocus: spot,
portId: name,
fromSpot: spot, toSpot: spot,
fromLinkable: output, toLinkable: input,
cursor: “pointer”

and i dont see the port also my make port function is as above

You wrote

var model = $(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });

But do you assign/use this model afterwards?

What you have there is fundamentally correct, assuming everything else you have is correct. Something else must be wrong.

Here’s a very simplified example showing link data with ports working:

[EDIT: removed obsolete sample]

The code:

// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, “Vertical”,
$(go.Shape, “Rectangle”,
{ width: 50, height: 50, portId: ‘Rect’ },
// Shape.fill is bound to
new go.Binding(“fill”, “color”)),
{ margin: 3 }, // some room around the text
// TextBlock.text is bound to
new go.Binding(“text”, “key”)),
$(go.Shape, “Circle”,
{ width: 50, height: 50, portId: ‘Circle’ },
// Shape.fill is bound to
new go.Binding(“fill”, “color”))

// but use the default Link template, by not setting Diagram.linkTemplate

var model = $(go.GraphLinksModel,
{ linkFromPortIdProperty: “fromport”,linkToPortIdProperty: “toport” });
var nodeDataArray = [
{ key: “Alpha”, color: “lightblue” },
{ key: “Beta”, color: “orange” },
{ key: “Gamma”, color: “lightgreen” },
{ key: “Delta”, color: “pink” }
model.nodeDataArray = nodeDataArray;
myDiagram.model = model;

// enable Ctrl-Z to undo and Ctrl-Y to redo
// (should do this after assigning Diagram.model)
myDiagram.undoManager.isEnabled = true;

var link = { from: “Alpha”, to: “Beta”, fromport: ‘Circle’, toport: ‘Rect’ };

var link2 = { from: “Gamma”, to: “Delta”, fromport: ‘Circle’, toport: ‘Circle’ };