I’m having an interesting time with buttons and the examples that use them are all sort of “partial” examples. I’ve created a button that expands a tree (sort of - I’m actually running into redrawing problems with that which I’ll post separately). Anyway, the “Buttons” introduction shows some buttons and provides a definition for them. The incremental tree demo shows a button created inline with the node template. There is NO example which shows how to implement a button created via one of the functions in the Buttons introduction. The reason why this is a problem is that I seem to have been able to do it using this snippet in the node definition:
$(“TreeExpanderButton”, makeTreeExpanderButton()),
Except:
a) I have no idea what the “TreeExpanderButton” argument is - I just copied it and there’s no good information on this in the API reference that I can find and
b) I can’t get the button to align on the right, outside of the rounded rectangle shape that contains the data. I placed the following in the button definition:
{
visible: true,
alignment: go.Spot.Right
},
but that seems to have absolutely no effect - the button is always centered in the rounded rectangle.
The full code for the node template is this:
var workItemDetailTemplate =
$(go.Node, “Auto”,
{
selectionObjectName: “PANEL”,
isTreeExpanded: false,
isTreeLeaf: false
},
$(go.Shape, “RoundedRectangle”,
{ stroke: “grey” },
{ fill: “white” },
{ name: “background” },
new go.Binding(“fill”, “color”)),
$(go.Panel, “Table”,
{ defaultAlignment: go.Spot.Left },
$(go.TextBlock, { row: 0, column: 0, margin: 1, font: “10pt Segoe UI” },
new go.Binding(“text”, “id”)),
$(go.TextBlock, “:”, { row: 0, column: 1, font: “10pt Segoe UI” }),
$(go.TextBlock, { row: 0, column: 2, margin: 1, font: “10pt Segoe UI” },
new go.Binding(“text”, “title”)),
$(go.TextBlock, “State”, { row: 1, column: 0, margin: 1, font: “10pt Segoe UI” }),
$(go.TextBlock, “:”, { row: 1, column: 1, font: “10pt Segoe UI” }),
$(go.TextBlock, { row: 1, column: 2, margin: 1, font: “10pt Segoe UI” },
new go.Binding(“text”, “state”)),
$(go.TextBlock, “Assigned To”, { row: 2, column: 0, margin: 1, font: “10pt Segoe UI” }),
$(go.TextBlock, “:”, { row: 2, column: 1, font: “10pt Segoe UI” }),
$(go.TextBlock, { row: 2, column: 2, margin: 1, font: “10pt Segoe UI” },
new go.Binding(“text”, “assignedTo”))),
$(“TreeExpanderButton”, makeTreeExpanderButton()),
// the label shows the node data’s text
{ // this tooltip Adornment is shared by all nodes
toolTip:
$(go.Adornment, “Auto”,
$(go.Shape, { fill: “#FFFFCC” }),
$(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
new go.Binding(“text”, “”, nodeInfo))
)
}
);
Any ideas?
The makeTreeExpanderButton function that is defined at Buttons is the definition of the “TreeExpanderButton”. We are providing the source code for the implementation in order for you to understand how the “TreeExpanderButton” Panel is defined by GraphObject.make. That makeTreeExpanderButton function is not part of the API.
$("TreeExpanderButton", makeTreeExpanderButton())
would be the same as:$("TreeExpanderButton", $("TreeExpanderButton"))
which is a really weird thing to do, although I guess it works OK.
If you want to put something (such as a Button) to the right of something, I suggest you use either a “Horizontal” Panel or a “Table” Panel or a “Spot” Panel, where the first element of the Panel would be the existing thing and the second would be the new thing such as the Button.
You can adapt the implementation of some existing node templates that do exactly this – just look through the samples or search for ‘Button"’. Also you might want to read about Nodes.