Adding a checkbox in a port

The “CheckBox” defaults to not being checked. What happens to the data when the user clicks it?

The same, nothing happens, data has the previous info. This could be only because I create dinamically ports on group based on ports of nested node?

    myDiagram.nodeTemplate =
      $(go.Node, "Table",
        $(go.Panel, "Auto", { stretch: go.GraphObject.Fill },
          $(go.Shape, { fill: "white" },
            new go.Binding("fill", "color")),
          $(go.TextBlock, { margin: 8 },
            new go.Binding("text"))
        ),
        $(go.Panel, "Table", 
          { column: 1,
            itemTemplate:
              $(go.Panel, "TableRow",
                new go.Binding("portId"),
                $("CheckBox", "checked"),
                $(go.TextBlock, { column: 1},
                  new go.Binding("text", "portId"))
              )
          },
          new go.Binding("itemArray", "ports")
        )
      );

and:

  myDiagram.model = new go.GraphLinksModel(
    [
      {
        key: 4, text: "Delta", color: "pink", ports: [
          { portId: "first", checked: true },
          { portId: "second", checked: false },
          { portId: "third" }
        ]
      }
    ]);

produces:
image

Probably I have to rethink the model I build…
this is what I did before :

      myDiagram.groupTemplate =
    	  $gj(go.Group, "Spot",
    			  { 
    		  background: "transparent",
    		  ungroupable: true,
    		  // highlight when dragging into the Group
    		  mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
    		  mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
    		  computesBoundsAfterDrag: true,
    		  // when the selection is dropped into a Group, add the selected Parts into that Group;
    		  // if it fails, cancel the tool, rolling back any changes
    		  mouseDrop: finishDrop,
    		  handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
    		  // Groups containing Groups lay out their members horizontally
    		  layout: makeLayout(false),
    		  cursor: "move"
    			  //dragComputation: stayInGroup

    			  },
    			  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    			  new go.Binding("layout", "horiz", makeLayout),
    			  new go.Binding("background", "isHighlighted", function(h) {
    				  return h ? "rgba(0,255,0,0.6)" : "transparent";
    			  }).ofObject(),
    			  $gj(go.Panel, "Auto",
    					  $gj(go.Shape, "Rectangle",
    							  { 
    						  fill: null, 
    						  strokeWidth: 2 },
    						  new go.Binding("stroke", "horiz", defaultColor),
    						  new go.Binding("stroke", "color")),
    						  $gj(go.Panel, "Vertical",  // title above Placeholder
    								  $gj(go.Panel, "Horizontal",  // button next to TextBlock
    										  {
    									  name: "hover-screenshot-panel",
    									  stretch: go.GraphObject.Horizontal, 
    									  //background: defaultColor(false), 
    									  portId: "totale",
    									  // allows links to/from all sides
    									  fromSpot: go.Spot.Right,
    									  toSpot: go.Spot.Left,
    									  fromLinkable: true,
    									  toLinkable: true,
    									  cursor:"pointer"
    										  },
    										  new go.Binding("background", "horiz", defaultColor),
    										  new go.Binding("background", "color"),
    										  $gj("SubGraphExpanderButton",
    												  { alignment: go.Spot.Right, margin: 5 }),
    												  $gj(go.TextBlock,
    														  {
    													  alignment: go.Spot.Left,
    													  editable: false,
    													  margin: 5,
    													  font: defaultFont(false),
    													  opacity: 0.75,  
    													  stroke: "#404040"
    														  },
    														  new go.Binding("font", "horiz", defaultFont),
    														  new go.Binding("text", "text").makeTwoWay())
    								  ),	// end Horizontal Panel
    								  $gj(go.Placeholder,
    										  { 
    									  padding: 15, 
    									  alignment: go.Spot.TopLeft 
    										  })
    						  )  // end Vertical Panel
    			  ), // end of Panel Auto
    			  $gj(go.Panel, "Vertical",
    					  {
    				  alignment: new go.Spot(1,0.6,50,0),
    				  name: "VPANEL"
    					  },
    					  new go.Binding("itemArray", "rightArray"),
    					  {
    				  itemTemplate:
    					  $gj(go.Panel,
    							  {
    						  _side: "right",
    						  fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
    						  fromLinkable: true, toLinkable: false, 
    						  cursor: "pointer",
    						  contextMenu: portMenu
    							  },
    							  new go.Binding("portId", "portId"),
    							  $gj(go.Shape, "Rectangle",
    									  {
    								  stroke: null, strokeWidth: 0,
    								  desiredSize: portSize,
    								  margin: new go.Margin(3, 0),
    								  fill: "blue"
    									  }
    							  ),
    							  $gj(go.TextBlock,
    									  { margin: new go.Margin(5, 0, 0, 25), 
    								  font: "bold 12px sans-serif",
    								  stroke:"white",
    								  alignment: go.Spot.Left, 
    								  fromLinkable: false, 
    								  toLinkable: false,
    								  shadowVisible: false
    									  },
   									  new go.Binding("text", "portId")
    							  ),
								  $gj("CheckBox", "",
										  { "ButtonIcon.stroke": "green",
									  "_buttonFillOver": "lightgreen", 
									  "_buttonStrokeOver": "green",
									  "Button.width": 20, "Button.height": 20,
									  margin:new go.Margin(3, 0)
										  },
									  new go.Binding("name", "portId")
								  )
    					  )  // end itemTemplate
    					  }
    			  )  // end Vertical Panel

In the code I create a function that adds ports to the group depending on nodes inside it. I tried also to give each checkbox the same name of the port, “portId”. As I see in your example each checkbox has the same name, “checked” and this in my comprehension means that I can refer each checkbox to the name of portid… I have to change all my approach to this,
but now it’s more clear.
Thx

Resolved. OK I’ve just changed the code omitting new go.Binding("name", "portId")
from the itempart and adding

$gj("CheckBox", "checked",
  { "ButtonIcon.stroke": "green",
  "_buttonFillOver": "lightgreen", 
  "_buttonStrokeOver": "green",
  "Button.width": 20, "Button.height": 20,
 margin:new go.Margin(3, 0)
  },

and now checked:false is present
That was easier than I expected to be… :-)
Thx
ciao
F