Add MenuContext into a Genogram

Hi !

I try to implement a Genogram diagram for a future professionnal using.

I would like to insert a Context Menu control into a Genogram diagram.

I use the tutorial Genogram Diagram code .
I just updated some colors and shape but nothing more .

I read into the documentation that I have to add a template node into my diagram which is link with a kind of a HTML list.

But I don’t know how to add this template because the Genogram diagram use a TemplateMap and not a single Template .

Can you help me ?

I hope you have read https://gojs.net/latest/intro/contextMenus.html.

As that Introduction page explains, adding context menu functionality to your Nodes is accomplished by setting the contextMenu property on your Node template. No additional node template is required.

Hi !

Yes I read the documentation.
I tried to insert the default context menu into my diagram but when it load, it throw an error :

///
Uncaught Error: GraphObject.contextMenu must be an Adornment or HTMLInfo.
at v (go-debug.js:12)
at V.set (go-debug.js:985)
at Lj (go-debug.js:663)
at Rl (go-debug.js:951)
at Pl (go-debug.js:946)
at init ((index):666)
at Object.success ((index):1212)
at j (jquery-js:2)
at Object.fireWith [as resolveWith] (jquery-js:2)
at x (jquery-js:4)

///

I’ve follow the instruction of the tutorial.
You can see below the genogram of the tutorial.
I added the default Context menu into the template like this :

///

myDiagram.nodeTemplateMap.add(“F”,
$$(go.Node, “Vertical”,
{ locationSpot: go.Spot.Center, locationObjectName: “ICON”},

                    $$(go.Panel,
                        { name: "ICON" },
                        $$(go.Shape, "Circle",
                            { width: 40, height: 40, strokeWidth: 2, fill: "white", portId: "" }),
                        $$(go.Panel,
                            { 
                                itemTemplate:
                                    $$(go.Panel,
                                        $$(go.Shape,
                                            { stroke: null, strokeWidth: 0 },
                                            new go.Binding("fill", "", attrFill),
                                            new go.Binding("geometry", "", femaleGeometry))
                                    ),
                                margin: 1
                            },
                            new go.Binding("itemArray", "a")
                        )
                    ),
                    $$(go.TextBlock,
                        { textAlign: "center", maxSize: new go.Size(80, NaN) },
                        new go.Binding("text", "n")),
                { //Adding the context menu to the template .
                    contextMenu:     
                        $("ContextMenu",  
                            $("ContextMenuButton",
                                $(go.TextBlock, "Test ContextMenu"),
                                { click: testContextMenuClick })
                            
                        ) 
                }
                ));

///

If I understood, this kind of contextMenu doesn’t need to be declare through a HTML block .

So I don’t know why the loading throw an execption …

Thank you for your time and your help !

Are you using jQuery? I think you are unintentionally using jQuery to build GraphObjects.

Yes you was right …

Sorry for the mistake …

Have a nice day !