Draggable Ports on First & Last Rows of Table

GoJS
1

Is it possible to have draggable ports on first and last columns of each row of a table.

Or will it be necessary to make many many changes. Thanks in advance.

2

It’s easy enough to add a separate “port” object to each row. It’s also easy to make any object in the “TableRow” or the whole “TableRow” Panel itself be a port, by binding GraphObject.portId to be a unique string.

But I don’t understand what you want when you mention “draggable ports”. Did you want users to be able to drag whole rows up or down, re-ordering the rows? That is quite implementable.

3

Dear Walter,

Many thanks for your reply - I am trying to add left and right ports to each non-header row. I have read a lot about this but can’t work it out as I am not that experienced with javascript. I see that I can access the row number but don’t know how to get this into a function. I have copied makePort from dataFlow.html and am using addRemoveColumns.html

Kind regards

Adam

{ // the rows for the people
                            defaultAlignment: go.Spot.Left,
                            defaultColumnSeparatorStroke: "black",
                            itemTemplate: // bound to a person/row data object
                                $(go.Panel, "TableRow",
                                // which in turn consists of a collection of cell objects,
                                // held by the "columns" property in an Array
		                        new go.Binding("itemArray", "columns"),
                                // you could also have other Bindings here for the whole row
								
								
								//Start of Hack - it looks like I add bindings here.
								//I want to call makePort for left and right rectangles
								//Don't know how
								new go.Binding("portID", "row",
											 function(i) { 
													var vs_port_in = "i" + i.toString(); 
													var vs_port_out = "o" + i.toString(); 
													return vs_port_in})
   							    .ofObject(), 
								//makePort(vs_port_in,true)
								//makePort(vs_port_out,false)
								//End of Hack								
								
								
                                {
                                    itemTemplate: // bound to a cell object
                                        $(go.Panel, // each of which as "attr" and "text" properties
                                        {
                                            stretch: go.GraphObject.Fill,
                                            alignment: go.Spot.TopLeft
                                        },
                                        new go.Binding("column", "attr"
4

AddRowColumn is a rather intricate sample to start from. Since you say you are new to JavaScript as well as to GoJS, I recommend that you read Get Started with GoJS and then all of the pages of the Introduction, GoJS Introduction -- Northwoods Software that apply to the kind of app that you want to build. The first dozen pages are essential to understand what you want to do, as well as several others about having multiple ports.

I suggest starting instead from a sample such as Record Mapper. That sample treats each whole row as a port, but you could change that to add two separate elements in each row, each of which is a different port.