I want to use a scrollable table for scrolling through list of properties in a node. Each property will have ports assigned to it so that links can be drawn between properties from other nodes. I used the scrollable table in this example Scrolling Table. The scrolling works fine but I need the resizable to be true on node level instead of scrollable table level and the table should resize as and when I resize the node. I made those changes but I am not seeing the scrollable table stretches with the available spaces in the node. It is showing like below now. How do I make it stretch along the node size? Thanks.
Note the minor changes to the node template, and the major change to the “PartResized” DiagramEvent listener.
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"PartResized": function(e) {
var node = e.subject;
var scroller = node.findObject("SCROLLER");
if (scroller !== null) {
const title = node.findObject("TITLE");
const titleH = title ? title.actualBounds.height : 0;
const border = node.findObject("BORDER");
const strokeW = border ? border.strokeWidth : 0;
scroller.desiredSize = new go.Size(node.actualBounds.width - strokeW, node.actualBounds.height - titleH - strokeW);
scroller._updateScrollBar(scroller.findObject("TABLE"));
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
//selectionObjectName: "SCROLLER",
resizable: true, //resizeObjectName: "SCROLLER",
portSpreading: go.Node.SpreadingNone
},
new go.Binding("location").makeTwoWay(),
$(go.TextBlock,
{ name: "TITLE", font: "bold 14px sans-serif" },
new go.Binding("text", "key")),
$(go.Panel, "Auto",
$(go.Shape, { name: "BORDER", fill: "white" }),
$("ScrollingTable",
{
name: "SCROLLER",
desiredSize: new go.Size(NaN, 60), // fixed width
stretch: go.GraphObject.Fill, // but stretches vertically
defaultColumnSeparatorStroke: "gray",
defaultColumnSeparatorStrokeWidth: 0.5
},
new go.Binding("TABLE.itemArray", "items"),
new go.Binding("TABLE.column", "left", function(left) { return left ? 2 : 0; }),
new go.Binding("desiredSize", "size").makeTwoWay(),
{
"TABLE.itemTemplate":
$(go.Panel, "TableRow",
{
defaultStretch: go.GraphObject.Horizontal,
fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
fromLinkable: true, toLinkable: true
},
new go.Binding("portId", "name"),
$(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
$(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
),
"TABLE.defaultColumnSeparatorStroke": "gray",
"TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
"TABLE.defaultRowSeparatorStroke": "gray",
"TABLE.defaultRowSeparatorStrokeWidth": 0.5,
"TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
}
)
)
);
That worked perfectly. Thank you so much Walter. Really appreciating your help.
I wanted to use row resizing and column resizing tools to same scrollable table. But now the layout breaks when I resize the rows or column. Any inputs to fix this issue would be a great help. Thank you.
I guess I do not understand exactly what the problems are.
I suppose it would be better if Adornments were not shown for rows or columns that were clipped. That would avoid having those “dangling” resize handles. This can be accomplished by improving the RowResizingTool.updateAdornments and ColumnResizingTool.updateAdornments methods.
And I suppose it would be better if the user couldn’t resize a row so that its bottom extended below the visible portion of the table, nor a column so that its right side went beyond the visible portion of the table. This can be implemented by overriding RowResizingTool and ColumnResizingTool.computeResize methods.
Ok. I will analyze those methods. Thank you so much Walter.