Thanks! I finally got it. By the import way it was impossible, same error occurs. We achieve it by injecting the ScrollingTable.js before calling our code.
Now we have ScrollingTable, but we have lost many styles that we had without the scroll. Next, we attach two screenshots of the before and the after.
Without scrolling:
With scrolling
This is our code:
const $ = GraphObject.make; // for conciseness in defining templates
// This is the function with the ScrollingTable.js code
this.loadScrollingTable();
this.diagram =
$(Diagram, 'relationsDiagram',
{
initialDocumentSpot: Spot.Center,
initialViewportSpot: Spot.Center,
initialAutoScale: Diagram.Uniform,
validCycle: Diagram.CycleNotDirected, // don't allow loops
'undoManager.isEnabled': true
});
// this.diagram.toolManager.mouseDownTools.add(new ColumnResizingTool());
const fieldTemplate =
$(Panel, 'TableRow', // this Panel is a row in the containing Table
new Binding('portId', 'name'), // this Panel is a "port"
{
background: 'transparent', // so this port's background can be picked by the mouse
// allow drawing links from or to this port:
fromLinkable: true, toLinkable: true
},
$(TextBlock,
{
margin: new Margin(0, 2), column: 0, font: 'bold 14px Roboto',
overflow: TextBlock.OverflowEllipsis,
wrap: TextBlock.None,
stretch: GraphObject.Horizontal,
// and disallow drawing links from or to this text:
fromLinkable: true, toLinkable: false
},
new Binding('text', 'name')),
$(TextBlock,
{
margin: new Margin(0, 2),
column: 1,
overflow: TextBlock.OverflowEllipsis,
stretch: GraphObject.Horizontal,
font: 'bold 14px Roboto'
},
new Binding('text', 'columnType')),
);
this.diagram.nodeTemplate =
$(Node, "Vertical",
{
selectionObjectName: "SCROLLER",
resizable: true, resizeObjectName: "SCROLLER",
portSpreading: Node.SpreadingNone
},
new Binding("location").makeTwoWay(),
$(TextBlock,
{ font: "bold 14px sans-serif" },
new Binding("text", "key")),
$(Panel, "Auto",
$(Shape, { fill: "white" }),
$("ScrollingTable",
{
name: "SCROLLER",
desiredSize: new Size(NaN, 60), // fixed width
stretch: GraphObject.Fill // but stretches vertically
},
this.makeSubBinding('TABLE.itemArray', 'columnDefinitions'),
new Binding("TABLE.column", "left", function(left) { return left ? 2 : 0; }),
new Binding("desiredSize", "size").makeTwoWay(),
{
"TABLE.itemTemplate":
$(Panel, "TableRow",
{
defaultStretch: GraphObject.Horizontal,
fromSpot: Spot.LeftRightSides, toSpot: Spot.LeftRightSides,
fromLinkable: true, toLinkable: true
},
new Binding("portId", "name"),
$(TextBlock, { column: 0 }, new Binding("text", "name")),
$(TextBlock, { column: 1 }, new Binding("text", "columnType"))
),
"TABLE.defaultColumnSeparatorStroke": "grey",
"TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
"TABLE.defaultRowSeparatorStroke": "grey",
"TABLE.defaultRowSeparatorStrokeWidth": 0.5,
"TABLE.defaultSeparatorPadding": new Margin(1, 3, 0, 3)
}
)
)
);
this.diagram.linkTemplate =
$(Link,
{
reshapable: false, resegmentable: false,
relinkableFrom: true, relinkableTo: true,
adjusting: Link.Stretch,
fromSpot: Spot.LeftRightSides,
toSpot: Spot.LeftRightSides
},
{
selectionAdornmentTemplate:
$(Adornment,
$(Shape,
{ isPanelMain: true, stroke: '#009fe3', strokeWidth: 2 }),
$(Shape,
{ toArrow: 'Standard', fill: '#009fe3', stroke: null, scale: 2.5 })
) // end Adornment
},
$(Shape, { stroke: '#646363', strokeWidth: 1.5 }),
$(Shape, { toArrow: 'Standard', stroke: null },
)
);
this.diagram.model =
$(GraphLinksModel,
{
archetypeNodeData: {},
linkFromPortIdProperty: 'sourceColumn',
linkFromKeyProperty: 'source',
linkToPortIdProperty: 'destinationColumn',
linkToKeyProperty: 'destination',
nodeDataArray: this.visualOrigins,
linkDataArray: this.relations
});
const tempfromnode =
$(Node,
{ layerName: 'Tool' },
$(Shape, 'Rectangle',
{
stroke: '#009fe3', strokeWidth: 3, fill: null,
portId: '', width: 1, height: 1
})
);
const temptonode =
$(Node,
{ layerName: 'Tool' },
$(Shape, 'Rectangle',
{
stroke: '#009fe3', strokeWidth: 3, fill: null,
portId: '', width: 1, height: 1
})
);
this.diagram.toolManager.linkingTool.temporaryFromNode = tempfromnode;
this.diagram.toolManager.linkingTool.temporaryFromPort = tempfromnode.port;
this.diagram.toolManager.linkingTool.temporaryToNode = temptonode;
this.diagram.toolManager.linkingTool.temporaryToPort = temptonode.port;
this.diagram.toolManager.relinkingTool.temporaryFromNode = tempfromnode;
this.diagram.toolManager.relinkingTool.temporaryFromPort = tempfromnode.port;
this.diagram.toolManager.relinkingTool.temporaryToNode = temptonode;
this.diagram.toolManager.relinkingTool.temporaryToPort = temptonode.port;
this.diagram.toolManager.linkingTool.temporaryLink =
$(Link,
{ layerName: 'Tool' },
$(Shape,
{ stroke: '#646363', strokeWidth: 2 })
);
// SUbbinding function
makeSubBinding(targetname, sourcename) {
const bind = new Binding(targetname, 'origin');
bind.converter = function (details, target) {
const value = details[sourcename];
if (value !== undefined) {
return value;
}
};
return bind;
}
The loadScrollingTable() is exactly the same as ScrollingTable.js
The problems we have are this:
- Our blue header and the white background (now is white) of the table get lost. I cannot find where to change it.
- We notice and strange behavior that we cannot resolve. We start with the contracted table:
Next, we expand it:
We click at the down scroll until the last record of the table:
We click at the up scroll until the scroll bar dissapear:
We contract the table again:
At this point, the scroll bar never returns and the user could not scroll through the table.
In summary, we want our initial styles table with the scrolling mode.
Thanks in advance, and sorry for the extension.