1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Separate Context menu for each type of nodes

Separate Context menu for each type of nodes

I am trying to implement a context menu for each of the node and each node needs to have seperate context menu items. 


7 Replies 1 reply marked as answer
SS Sivakumar Sekar Syncfusion Team November 10, 2021 12:05 PM UTC

Hi Aashutosh,  
  
We have created a sample to open a context menu when right click on node. Before the context menu gets opened, contextMenuOpen event gets fired. In that event check if any node is selected or not through the diagram selectedItems property. We can able to hide the context menu items through hiddenItems property. In that based on the node’s id you can hide the other menu items. If node-1 gets selected means then push other two items in hiddenItems collection. So that when you select the node-1 open context menu means Item-1 only gets shown, other two items gets hidden. Similary, you can hide the menu items based on your operation. Please refer to the below code snippet  

function contextMenuOpen(args) { 
  for (let item of args.items) { 
    if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'sdlc' && 
      item.text !== 'Item-1' 
    ) { 
// Hide the other items in hidden items collection expect Item-1 
      args.hiddenItems.push(item.id); 
    } else if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'support' && 
      item.text !== 'Item-2' 
    ) { 
      args.hiddenItems.push(item.id); 
    } else if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'analysis' && 
      item.text !== 'Item-3' 
    ) { 
      args.hiddenItems.push(item.id); 
    } 
  } 
} 
 

We have attached a video demonstration of context menu gets opened for different nodes. Please find the video in the below link  
  


Regards 
Sivakumar     


AD Aashutosh Dhungana November 10, 2021 01:30 PM UTC

This helped. Thank you for your support



SS Sivakumar Sekar Syncfusion Team November 11, 2021 01:11 PM UTC

Hi Aashutosh, 

Thanks for your update.  

Regards, 
Sivakumar   


Marked as answer
AD Aashutosh Dhungana replied to Sivakumar Sekar November 26, 2021 07:57 AM UTC

Can we add new items in the items list dynamically?
for eg:

contextMenuSettings: {

    show: true,

    items: [

      {

        text: 'Item-1',

        id: 'item1',

        target: '.e-diagramcontent',

      },

      {

        text: 'Item-2',

        id: 'item2',

        target: '.e-diagramcontent',

      },

      {

        text: 'Item-3',

        id: 'item3',

        target: '.e-diagramcontent',

      },

    ],

    showCustomMenuOnly: true,

  },

Here, suppose i want to add
{

       text: 'Item-4',

      id: 'item-4',
}
I want to know if this is possible, and if yes then how?


SS Sivakumar Sekar Syncfusion Team November 29, 2021 02:36 PM UTC

Hi Aashutosh, 

By Default, In diagram ContextMenu, we can`t able to add items dynamically. Instead, we can able to show or hide the items in contextMenuOpen event. please refer to the below code to show the context menu based on a specific condition. 

function contextMenuOpen(args) { 
  for (let item of args.items) { 
    if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'sdlc' && 
      item.text !== 'Item-1' 
    ) { 
      args.hiddenItems.push(item.id); 
    } else if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'support' && 
      item.text !== 'Item-2' 
    ) { 
      args.hiddenItems.push(item.id); 
    } else if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'analysis' && 
      item.text !== 'Item-3' 
    ) { 
      args.hiddenItems.push(item.id); 
    } if ( 
      diagram.selectedItems.nodes.length && 
      diagram.selectedItems.nodes[0].id === 'analysis' 
    ) { 
      args.hiddenItems.push("item4"); 
    } 
  } 
} 
  

Regards, 
Sivakumar   



JH JACQUES HACHE October 28, 2022 02:12 PM UTC

Let's say the user switches from English to French. 

If the items cannot be added/removed dynamicly, how do we go about updating the items with the proper locale?

thanks,

Jacques


BM Balasubramanian Manikandan Syncfusion Team October 31, 2022 01:45 PM UTC

Hi Aashutosh,


We should set the French culture initially and can update the context menu items dynamically by using contextMenuOpen event.


Code Snippet:

 

ej.base.setCulture('de');

 

function contextMenuOpen(args) {

  for (let item of args.items) {

    if (

      diagram.selectedItems.nodes.length &&

      diagram.selectedItems.nodes[0].id === 'sdlc' &&

      item.text !== 'Objet-1'

    ) {

      args.hiddenItems.push(item.id);

    } else if (

      diagram.selectedItems.nodes.length &&

      diagram.selectedItems.nodes[0].id === 'support' &&

      item.text !== 'Objet-2'

    ) {

      args.hiddenItems.push(item.id);

    } else if (

      diagram.selectedItems.nodes.length &&

      diagram.selectedItems.nodes[0].id === 'analysis' &&

      item.text !== 'Objet-3'

    ) {

      args.hiddenItems.push(item.id);

    }

  }

}

 



Sample :

https://stackblitz.com/edit/npuzur-fun9ha?file=index.js



Regards,

Balasubramanian


Loader.
Up arrow icon