How to add menu into the diagram component?

[Arul Lakshmanan]

Hi Team,

I can see the menu in below mentioned link. But, In my application after installing version "@syncfusion/ej2-react-diagrams 18.2.46" unable to see where to add menu into the diagram component. Is there any attribute or key to mention? Please let me know how to achieve this.

link - https://www.npmjs.com/package/@syncfusion/ej2-react-diagrams

[Aravind Ravi]

Hi Arul, 

 

We have created a sample to show context menu in the diagram. By using the diagram’s contextMenuSettings property we can able to show menu in the diagram. In the contextMenuSettings property set show as true. To show content menu in the diagram, inject DiagramContextMenu services in the diagram. Please refer to the below code snippet and sample 

 

<DiagramComponent id="diagram" ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"645px"} nodes={sdlc} connectors={connections}  

snapSettings={{ constraints: SnapConstraints.None }} 

        //Enables the context menu 

    contextMenuSettings = { 

        { 

            show: true 

            } 

        }> 

              <Inject services={[UndoRedo, DiagramContextMenu]}/> 

            </DiagramComponent> 

 

Sample: https://stackblitz.com/edit/react-zevegd 

 

For more information about how to use context menu diagram, please refer to the below UG documentation link 

 

UG link: https://ej2.syncfusion.com/react/documentation/diagram/context-menu/ 

 

Regards 

Aravind Ravi