Add MenuContext into a Genogram

GoJS
1

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 ?

2

I hope you have read GoJS Context Menus -- Northwoods Software.

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.

3

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 !

4

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

5

Yes you was right …

Sorry for the mistake …

Have a nice day !