We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. Context Menu Items

Context Menu Items


I'm trying to get custom context menu items to show Icons on the grids context menu.

I can't get any icons to show up in the context menu. I can get some show up just in code but not all:

<p>Sync Fusion Icon(\e250):<span class="e-icon e-upload"></span></p>
<p>Sync Fusion Icon(\e309):<span class="e-icon e-recurrence"></span></p>
<span>Below is a font awesome Icon</span>
  <span class="e-warning"><fa-icon [icon]="['fal','info-circle']" class="mr-2"></fa-icon> Grid looks different? Just right click on a row for actions.</span>

CSS for icons:
.e-icon
{  
     font-size: 25px;
}

.e-upload:before
 {  
     content:'\e250';
}

.e-recurrence:before
 {  
     content:'\e309';
}

Context menu item with icon:
actionMenu.
push
({
        text: this.actions.Complete,
        id: this.actions.Complete,
        iconCss: 'e-icon e-upload'
      });

In the following screenshot both of these highlighted items have the same CSS class.



I've added the fabric.css from you CDN. <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" rel="stylesheet" />
I've also added the following imports into my main styles.css class.

@import '../node_modules/@syncfusion/ej2-base/styles/fabric.css';
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-base/styles/fabric.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/fabric.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fabric.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/fabric.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-angular-popups/styles/fabric.css';

I'm assuming I am messing up a css class or do not have the right imports.
The documentation around icons and what you need to import to make them work seems very limited or I just can't seem to find it. None of the forum posts I could find helped and most the looked good refenenced properties of the ContextMenuItemModel that do not exist like iconPath.

What would be nice is some examples, in Angular, of how to use other Icon libraries like font awesome.


3 Replies
DR Dhivya Rajendran Syncfusion Team October 28, 2019 10:11 AM UTC

Hi Jake, 

Thanks for contacting Syncfusion support. 

For your reference, we have created a sample with custom context menu items and use font awesome icons (icon libraries). Please refer the below code example and sample for more information. 

[index.html] 
<head> 
    <meta charset="utf-8"> 
    <title>Window</title> 
    . . . . 
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" /> 
    <link rel="stylesheet" rel='nofollow' href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" rel='nofollow' href="favicon.ico"> 
</head> 


ngOnInit(): void { 
  this.data = orderDetails; 
  this.contextMenuItems = [{ 
      text: 'Cart', 
      id: 'shoppingcart', 
      iconCss: 'fa fa-shopping-cart' 
  }]; 
  this.editing = { allowDeleting: true, allowEditing: true }; 
} 



Regards, 
R.Dhivya 


JA Jake October 28, 2019 01:52 PM UTC

I had tried that exact reference, except I did not have the pro icons referenced correctly in my angular.json file. 
They are working with the corrected angular.json file.


Thank you for your help.

BS Balaji Sekar Syncfusion Team October 29, 2019 05:26 AM UTC

Hi Jake, 
Thanks for your update. 

We are glad to hear that your problem has been resolved. 

Please get back to us if you need further assistance from us. 

Regards,
Balaji Sekar. 


Loader.
Live Chat Icon For mobile
Up arrow icon