Dynamically add custom context menu to the nodes

GoJS
1

I am using Go JS 1.7 evaluation version for self project. I have a scenario in which I am creating diagram nodes and relationships dynamically, that is, by fetching values from database. I want to show context menu on the node displayed in the diagram as per its Name property. I looked into some samples :

But these samples creates all the HTML menu in the HTML page and then just use show or hide functionality to displaay menu accordingly. In my case there could me 8-10 context menu on one node and hence creating all the menus before hand is not a option for me. Is there a way I can dynamically add context menu to the diagram?
I have tried a simple code:

var cxTool = $scope.myDiagram.toolManager.contextMenuTool;

 cxTool.showContextMenu = function(contextmenu, obj) {
                if(obj.part.data.properties.Name === 'Something'){
                    $scope.myDiagram.contextMenu =
                        $(go.Adornment, "Vertical",
                            $("ContextMenuButton",
                                $(go.TextBlock, "Change Color for Something"),
                                { click: changeColor }
                            )
                        );
                } else if(obj.part.data.properties.Name === 'SomethingElse'){
                    $scope.myDiagram.contextMenu =
                        $(go.Adornment, "Vertical",
                            $("ContextMenuButton",
                                $(go.TextBlock, "Change Color for SomethingElse"),
                                { click: changeColor }
                            )
                        );
                }
}

But thus code does not create context menu. Can you please provide some solution for it?

2

You can use data bindings in your context menus. That is what the basic sample does to display different buttons for different objects, and show different information.

3

But that still requires me to declare all possible menu before hand, I want to do that when user right click on the node object. May be write some code in “ObjectContextClicked” event. So that I can pass Node name (and any other properties required to fetch data from Database) and create Menu according to returned values.

4

Actually, I think you had the right idea in your first post, except that you need to modify the first argument, the Adornment that should be shown. Not create a new one and assign it – in that method it’s too late already.

5

Thanks for the reply, will you be able to provide some code snippet, I did not understand how exactly I can handle it.

6

Define your object, such as a Node, with a GraphObject.contextMenu that is an empty context menu Adornment:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { contextMenu: $("ContextMenu") },
        . . .
      );

Then your override of ContextMenuTool.showContextMenu can look at the data and construct the context menu in whatever manner that you like:

      $(go.Diagram, . . .,
          { . . .,
            "contextMenuTool.showContextMenu": function(cm, obj) {
              var data = obj.part.data;

              // first clear out any existing ContextMenuButtons
              while (cm.elements.count > 0) cm.removeAt(0);

              // then add those menu items that you want
              if (data.color.indexOf("i") >= 0) {
                cm.add($("ContextMenuButton",
                         $(go.TextBlock, "Do Something"),
                         { click: function(e, but) { console.log("doSomething()"); } }));
              }
              if (data.color.indexOf("e") >= 0) {
                cm.add($("ContextMenuButton",
                         $(go.TextBlock, "Do Something Else"),
                         { click: function(e, but) { console.log("doSomethingElse()"); } }));
              }
              go.ContextMenuTool.prototype.showContextMenu.call(this, cm, obj);
            },
        . . .)