I have created two templates, one for the primary keys and one for the regular fields. I want the primary keys to be underlined with no border show between key attributes. Then I want a border to show between the primary key attributes and regular attributes. So I created a fieldTemplate to handle that. However, when I add both templates, the border doesn’t line up because each table is recognize separately. Here is my code.
// creates the template for primary key fields which is a panel with table rows
var pkTemplate =
$(go.Panel, "TableRow",
// sets the port for binding between two node
new go.Binding("portId", "name"),
{
// enables selection of port by mouse
background: "transparent",
// allows links can go from and to both sides
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
// allows drawing links from or to this port
fromLinkable: true,
toLinkable: true,
// allows drawing links within the same node
fromLinkableSelfNode: true,
toLinkableSelfNode: true
},
// allows the user to select fields
{
click: function(e, item) {
// assume "transparent" means not "selected", for items
var oldskips = item.diagram.skipsUndoManager;
item.diagram.skipsUndoManager = true;
item.background = item.background === "transparent" ? "dodgerblue" : "transparent";
item.diagram.skipsUndoManager = oldskips;
}
},
// creates the primary key field name
$(go.TextBlock,
{
name: "FIELD",
column: 1,
margin: new go.Margin(5, 5, 4, 5),
stretch: go.GraphObject.Horizontal,
font: "11pt sans-serif",
wrap: go.TextBlock.None,
cursor: "text",
editable: true
},
// sets the text to lowercase and underlines the field
new go.Binding("text", "name", function(field) { return field.toLowerCase() }).makeTwoWay(),
new go.Binding("isUnderline", "name", function(pk) { return true }),
),
// creates the primary key data type
$(go.TextBlock,
{
name: "DATATYPE",
column: 2,
margin: new go.Margin(5, 5, 4, 5),
stretch: go.GraphObject.Horizontal,
font: "11pt sans-serif",
wrap: go.TextBlock.None,
cursor: "text",
editable: true
},
// sets the text to uppercase
new go.Binding("text", "dataType", function(type) { return type.toUpperCase() }).makeTwoWay()
)
);
// creates the template for regular fields which is a panel with table rows
var fieldTemplate =
$(go.Panel, "TableRow",
// sets the port for binding between two node
new go.Binding("portId", "name"),
{
// enables selection of port by mouse
background: "transparent",
// allows links can go from and to both sides
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
// allows drawing links from or to this port
fromLinkable: true,
toLinkable: true,
// allows drawing links within the same node
fromLinkableSelfNode: true,
toLinkableSelfNode: true
},
// allows the user to select fields
{
click: function(e, item) {
// assume "transparent" means not "selected", for items
var oldskips = item.diagram.skipsUndoManager;
item.diagram.skipsUndoManager = true;
item.background = item.background === "transparent" ? "dodgerblue" : "transparent";
item.diagram.skipsUndoManager = oldskips;
}
},
// creates the regular field name
$(go.TextBlock,
{
name: "FIELD",
column: 1,
margin: new go.Margin(5, 5, 4, 5),
stretch: go.GraphObject.Horizontal,
font: "11pt sans-serif",
wrap: go.TextBlock.None,
cursor: "text",
editable: true
},
// sets the text to lowercase
new go.Binding("text", "name", function(field) { return field.toLowerCase() }).makeTwoWay()
),
// creates the field data type
$(go.TextBlock,
{
name: "DATATYPE",
column: 2,
margin: new go.Margin(5, 5, 4, 5),
stretch: go.GraphObject.Horizontal,
font: "11pt sans-serif",
wrap: go.TextBlock.None,
cursor: "text",
editable: true
},
// sets the text to uppercase
new go.Binding("text", "dataType", function(type) { return type.toUpperCase() }).makeTwoWay()
)
);
// creates the node template of type auto
fileDiagram.nodeTemplate =
$(go.Node, "Auto",
{
selectionAdorned: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
},
// binds the location of the node
new go.Binding("location", "location").makeTwoWay(),
// sets the fill and stroke of the outer node
$(go.Shape, "Rectangle", {
fill: "#eaeffd",
stroke: "#3c599b",
strokeWidth: 1.5
}),
// creates the node table
$(go.Panel, "Table",
$(go.Panel, "Auto",
// stretches the header of the table to fill the node
{
stretch: go.GraphObject.Horizontal
},
// sets the fill and stroke of the header of the node
$(go.Shape,
{
fill: "#3c599b",
stroke: null
}
),
// sets the header text style and grabs the text from the binding
$(go.TextBlock,
{
alignment: go.Spot.Center,
margin: 3,
stroke: "white",
textAlign: "center",
font: "bold 12pt sans-serif",
cursor: "text",
editable: true,
},
new go.Binding("text", "key", function(key) { return key.toUpperCase() }).makeTwoWay(),
)
),
// separates each row of the table with a line
{defaultRowSeparatorStroke: "#3c599b"},
// sets the primary key row
$(go.Panel, "Table",
new go.Binding("itemArray", "pks"),
{
name: "PKS",
row: 1,
minSize: new go.Size(100, 10),
stretch: go.GraphObject.Horizontal,
defaultAlignment: go.Spot.Left,
defaultColumnSeparatorStroke: "#3c599b",
cursor: "pointer",
itemTemplate: pkTemplate
}
),
// sets the fields row
$(go.Panel, "Table",
new go.Binding("itemArray", "fields"),
{
name: "FIELDS",
row: 2,
minSize: new go.Size(100, 10),
stretch: go.GraphObject.Horizontal,
defaultAlignment: go.Spot.Left,
defaultColumnSeparatorStroke: "#3c599b",
cursor: "pointer",
itemTemplate: fieldTemplate
}
)
)
);