Tick functionality on a context menu item for the angular diagram control

[Simon OBrien]

I would like to be able to show/hide a tick icon for a context menu item.  Such as the example shown for the syncfusion file manager example.

http://localhost:4262/Angular//#/material/file-manager/overview

Do you know how this would be possible using the diagram component? 

Many thanks in advance.

Regards,

Simon O'Brien

[Gowtham Gunashekar]

 

Hi Simon, 

 

Please refer the following sample for how to show/hide a tick icon for a context menu item. In the sample, we have created a three node. If we select any of the node and perform right click means the tick icon will render based on the selected node color. In the contextMenuBeforeItemRender event we have added the icon to respected item. 

 

Code snippet: 

  public contextMenuBeforeItemRender(args) { 

    if ( 

      (args.item.id === "color-1" && 

        this.diagram.selectedItems.nodes[0].id === "node2") || 

      (args.item.id === "color-2" && 

        this.diagram.selectedItems.nodes[0].id === "node3") || 

      (args.item.id === "color-3" && 

        this.diagram.selectedItems.nodes[0].id === "node4") 

    ) { 

//set icon for the specific item 

      args.element.innerHTML = 

        '<span class="e-menu-icon e-icons e-tick"></span>' + args.item.text; 

    } else if ( 

      args.item.id === "color-1" || 

      args.item.id === "color-2" || 

      args.item.id === "color-3" 

    ) { 

      args.element.innerHTML = 

        '<span class="e-menu-icon e-icons  e-space"></span>' + args.item.text; 

    } 

  } 

 

 

Sample link: https://stackblitz.com/edit/angular-pmjzxx-yfvdkn?file=app.component.ts 

 

Regards, 

Gowtham. 

[Simon OBrien]

Hi Gowtham,

Thanks for the quick response,  That answers my question.

Regards,

Simon O'Brien

[Gowtham Gunashekar]

Hi Simon,  

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards, 

Gowtham