What is the best way to show custom image (png, jpg) in context menu ?

Hello,

Is it possible to use a custom image in the context menu for the dialog component?
How could we achieve this kind of presentation :



Image files are located in the assets folder of the application and we are using Angular 7.

Than you,
M

3 Replies

AR Aravind Ravi Syncfusion Team April 8, 2020 12:00 PM UTC

Hi Maja, 
 
We have created a sample to show context menu with the custom images. By using Icon css you can add images to context menu. Please find the below code snippet for how to add images 
 
//app.component.ts 
 
public contextMenuItems: ContextMenuItemModel[] = [ 
    { 
      text: 'Delete', id: 'delete', target: '.e-diagramcontent', 
            iconCss: 'e-delete' 
    }, 
    { 
      text: 'Reset' , id: 'reset', target: '.e-diagramcontent', 
      iconCss: 'e-reset' 
    }, 
    { 
      text: 'Repeatable', id: 'repeat', target: '.e-diagramcontent', 
      iconCss: 'e-repeat' 
    } 
  ] 
 
//app.component.html 
<style> 
   
        .e-delete { 
            height: 28px; 
            width: 20px; 
            background-image: url(assets/images/images.png); 
            background-repeat: no-repeat; 
        } 
        .e-reset { 
            height: 28px; 
            width: 20px; 
            background-image: url(assets/images/javascript.png); 
            background-repeat: no-repeat; 
        } 
        .e-repeat { 
            height: 28px; 
            width: 20px; 
            background-image: url(assets/images/images.png); 
            background-repeat: no-repeat; 
        } 
    
</style> 
 
 
 
We have attached a sample for your reference. Please find the sample in below link 
 
 
Regards 
Aravind Ravi 
 



MM MM April 8, 2020 12:34 PM UTC

Thank you.
It's working just fine ...


AR Aravind Ravi Syncfusion Team April 8, 2020 12:54 PM UTC

Hi Maja, 
 
Thanks for your update 
 
Regards 
Aravind Ravi 


Loader.
Up arrow icon