You would think this would be easy but I’m missing something. I have a template defined as follows:
var workItemDetailTemplate =
g(go.Node, "Spot",
{
selectionObjectName: "PANEL",
isTreeExpanded: false,
isTreeLeaf: false,
selectionChanged: nodeSelectionChanged
},
g(go.Shape, { fill: "white", stroke: "black", strokeWidth: .5, width: 195, height: 55, name: "PANEL" }),
g(go.Panel, "Table",
{
defaultAlignment: go.Spot.Left,
margin: 4
},
g(go.RowColumnDefinition, { column: 0, width: 20 }),
g(go.RowColumnDefinition, { column: 1, width: 50 }),
g(go.RowColumnDefinition, { column: 2, width: 25 }),
g(go.RowColumnDefinition, { column: 3, width: 100 }),
g(go.RowColumnDefinition, { row: 0, height: 20 }),
g(go.RowColumnDefinition, { row: 1, height: 15 }),
g(go.RowColumnDefinition, { row: 2, height: 20, alignment: go.Spot.Bottom }),
g(go.TextBlock, "", { column: 0, row: 0, rowSpan: 3, stretch: go.GraphObject.Vertical, background: "red" }),
g(go.TextBlock, { column: 1, row: 0, font: "8pt arial", columnSpan: 3 }, new go.Binding("text", "workItemType")),
g(go.TextBlock, { column: 1, row: 1, font: "bold 10pt arial" }, new go.Binding("text", "id")),
g(go.TextBlock, { column: 2, row: 1, font: "10pt arial", columnSpan: 2, wrap: go.TextBlock.None }, new go.Binding("text", "title")),
g(go.TextBlock, { column: 1, row: 2, font: "8pt arial", columnSpan: 2 }, new go.Binding("text", "state")),
g(go.TextBlock, { column: 3, row: 2, font: "8pt arial", width: 125, textAlign: "right", wrap: go.TextBlock.None}, new go.Binding("text", "assignedTo"))
), //End of table
g("TreeExpanderButton",
new go.Binding("alignment", "alignment"),
new go.Binding("alignmentFocus", "alignmentFocus"),
{ visible: true },
{ click: expandNode },
{ name: "treeButton" }
)
);
I have the expand node method:
function expandNode(e, obj) {
var node = obj.part; // OBJ is this button
if (!(node instanceof go.Node)) return;
var diagram = node.diagram;
if (diagram === null) return;
e.handled = true;
diagram.startTransaction("CollapseExpandTree");
// this behavior is specific to this incrementalTree sample:
var data = node.data;
if (!data.everExpanded) {
// only create children once per node
diagram.model.setDataProperty(data, "everExpanded", true);
workItemDiagram.model.startTransaction("increment");
getIncrementalData(data.key, data.id);
workItemDiagram.model.commitTransaction("increment");
}
// this behavior is generic for most expand/collapse tree buttons:
node.isTreeExpanded = !node.isTreeExpanded; // expand or collapse
diagram.commitTransaction("CollapseExpandTree");
updateLinkFormat();
}
Yet, when I add my first node to the diagram and do either of the following:
(where n is the node):
n.expandTree();
or
n.isTreeExpanded = true;
The expand node method is never called. If I collapase the node and expand it again it works fine but programmatically it's a no-go.
I'm sure it's something I'm missing...