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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Context Menu Items

Thread ID:

Created:

Updated:

Platform:

Replies:

148591 Oct 25,2019 06:57 PM UTC Oct 29,2019 05:26 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Jake
Asked On October 25, 2019 06:57 PM UTC


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-size25px;
}

.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.


Dhivya Rajendran [Syncfusion]
Replied On 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 


Jake
Replied On 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.

Balaji Sekar [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon