Context Menus

GoJS
1

I’ve looked at the examples on using context menus and searched the forums for answers but still can’t find guidance on how to deal with a couple of issues. We are placing our context menu on individual nodes, using the contextMenu attribute. We have a few questions that I haven’t been able to figure out how to get around:

  1. We want to style the background of each of the ContextMenuButtons to have a background that is something different than the default white to gray gradient. I have tried setting the background and areaBackground attributes on the Adornment, the ContextMenuButton and the TextBlock. The closest I have come to getting this to work is setting the background on the TextBlock which changes the background on the text but not the padded area around it. Is it possible to style the whole area?

  2. We would like to use a binding on the data attached to the node to disable specific ContextMenuButtons when the data object is in a certain state, preferring to show them in a subdued greyed out state and not allowing them to be clicked. Is that possible and if so how?

I have tried a bunch of different iterations but just haven’t seemed to get it right. Any guidance would be greatly appreciated. Here is how we are defining the context menu for our Node object

            contextMenu:
                GO(go.Adornment, "Vertical", 
                    GO("ContextMenuButton", 
                        GO(go.TextBlock,
                            new go.Binding("text","", getExportDatasetContextMenuName),
                        {
                            margin: 5,
                            font: pfdStyles.dataNodeFont,
                            textAlign: "left",
                            click: exportDataset

})
),
GO(“ContextMenuButton”,
GO(go.TextBlock,
new go.Binding(“text”,"", getImportDatasetContextMenuName),
{
margin: 5,
font: pfdStyles.dataNodeFont,
textAlign: “left”,
click: importDataset
})
)
)

2

You can set the Shape.fill or other Shape properties of the Button by:
GO(“ContextMenuButton”,
{ “ButtonBorder.fill”: “lightgreen” },
. . .)
The definition of “ContextMenuButton” (and “Button”, which it uses) is shown in GoJS Buttons -- Northwoods Software. In version 1.5 we will put that code into a separate file, in the extensions directory, so that it’s easy to copy and load. Version 1.5 also supports defining your own named GraphObject builders, just as “Button” and “ContextMenuButton” are defined.

The Basic GoJS Sample sample shows how context menu buttons can be made invisible when they are disabled. Instead of binding the GraphObject.visible property, you could bind other properties for your own purposes.

3

Thanks for the info, that helped get the styling right. I wished there was a way to enable/disable the ContextMenuButtons but setting visiblity seems to work for us now. Thanks for the help.

4

We have considered adding a Panel.isEnabled property or something like that. You could implement something like that for your app by adding such a property on your node data, and using data binding.
Hmmm, instead of having a zillion data bindings and changing things dynamically, it might be easier to use two separate templates – a node template with the button “enabled” and one with it “disabled”. But dynamically switching templates by changing the node data category has significant overhead.

So it might be easiest if you had a function that changed all of the properties at once, and if you called that function when toggling the enabled state.