Adding Dividers Between ContextMenuButtons

GoJS
1

We are currently implementing context menus in GoJS version 2.2.13 using “ContextMenu” and “ContextMenuButton.” As is customary in many applications, we often group context menu buttons and include “dividers” to improve user interaction and navigation.

Can I add dividers between individual ContextMenuButton in GoJS?
Your insights on this matter would be greatly appreciated.

2

If you are using “ContextMenu”, you are building a context menu in GoJS rather than in HTML. So if you want to add a separator between buttons in the context menu, just add a horizontal line. Perhaps something like:

  function Separator() {
    return $(go.Shape, "LineH", { height: 3, stretch: go.GraphObject.Horizontal, background: "white" });
  }

You could then use this in your “ContextMenu” in this manner:

$("ContextMenu",
  $("ContextMenuButton", . . .),
  $("ContextMenuButton", . . .),
  $("ContextMenuButton", . . .),
  $("ContextMenuButton", . . .),
  Separator(),
  $("ContextMenuButton", . . .),
  $("ContextMenuButton", . . .),
)

You could also put other non-button things into the context menu, such as a header or information identifying the object being operated on.

3

Hi, Walter.

The sample code you provided worked exactly as I expected.
This solved my problem.

Thank you very much for your assistance.