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

Not loading Context Menu items

Thread ID:

Created:

Updated:

Platform:

Replies:

145265 Jun 14,2019 08:27 AM UTC Jun 18,2019 10:08 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Neo
Asked On June 14, 2019 08:27 AM UTC

Hi all,

I created Grid with context menu items like below,

** HTML **

<ejs-grid #dataGrid [dataSource]='Data' [columns]='Columns' height='100%'
[contextMenuItems]='ContextMenuItems' [toolbar]='Toolbar'
(toolbarClick)="ToolbarClicked($event)" (contextMenuOpen)='ContextMenuOpened($event)'
(contextMenuClick)='ContextMenuClicked($event)'>
</ejs-grid>

** TS **
ngOnInit() {
this.ContextMenuItems = [
{ id: 'approveAll', text: 'Approve All', target: '.e-content', iconCss: 'e-custom-edit iconstyle' },
{ id: 'viewReport', text: 'View Report', target: '.e-content', iconCss: 'e-custom-edit iconstyle' }
];
}


ContextMenuOpened(args: BeforeOpenCloseMenuEventArgs) {

this.ContextMenuItems = [
{ id: 'approve', text: 'Approve', target: '.e-content', iconCss: 'e-custom-edit iconstyle' },
{ id: 'delete', text: 'Delete', target: '.e-content', iconCss: 'e-custom-edit iconstyle' }
];
this.readingGrid.dataBind();
}



In the mentioned code, I used 'ngOnInit' for create context menu item at the beginning. Then I need to change context menu items when goes to the gird edit mode by clicking on the tool bar 'edit' button. (Vice versa). But it is not working. Context menu becomes empty items and shows empty context menu and instantly disappear. Even though it's working when it comes to the normal mode by clicking on the cancel button. What is the problem here you can identify and please let me know the better solution for this.

Thank you.


Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 17, 2019 01:34 PM UTC

Hi Neo, 

Thanks for contacting Syncfusion support. 

We have validated your query and found that you want to dynamically change the contextMenu items. We have prepared a sample based on your requirement. Please find the below code snippet and sample for your reference. 

App.component.html 
<div class="control-section"> 
    <ejs-grid [dataSource]='data' #grid id="gridcomp" allowPaging='true' allowExcelExport='true' allowPdfExport='true' allowSorting='true' (contextMenuOpen)='ContextMenuOpen($event)' 
        [contextMenuItems]="contextMenuItems" [editSettings]='editing'>  
. . . 
    </ejs-grid> 
</div> 

App.component.ts 
    ngOnInit(): void { 
        this.data = orderDetails; 
        this.contextMenuItems = [ 
          { id: 'approveAll', text: 'Approve All', target: '.e-content'}, 
      { id: 'viewReport', text: 'View Report', target: '.e-content' }, 
       { id: 'approve', text: 'Approve', target: '.e-content'  }, 
      { id: 'delete', text: 'Delete', target: '.e-content'} 
    ]; 
        this.editing = { allowDeleting: true, allowEditing: true }; 
    } 
    ContextMenuOpen (args) { 
   let data: any = this.grid.getSelectedRecords()[0]; 
   if (data.OrderID %2 == 0) { 
this.grid.contextMenuModule.contextMenu.showItems(['Approve All','View Report']);   //dynamically showing the items based on condition 
   } 
   else { 
this.grid.contextMenuModule.contextMenu.hideItems(['Approve All','View Report']); //dynamically hiding the items based on condition 
   } 
        } 


                             https://ej2.syncfusion.com/angular/documentation/api/context-menu/#hideitems 


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

Regards, 
Thavasianand S. 


Neo
Replied On June 18, 2019 08:42 AM UTC

Hi Neo, 

Thanks for contacting Syncfusion support. 

We have validated your query and found that you want to dynamically change the contextMenu items. We have prepared a sample based on your requirement. Please find the below code snippet and sample for your reference. 

App.component.html 
<div class="control-section"> 
    <ejs-grid [dataSource]='data' #grid id="gridcomp" allowPaging='true' allowExcelExport='true' allowPdfExport='true' allowSorting='true' (contextMenuOpen)='ContextMenuOpen($event)' 
        [contextMenuItems]="contextMenuItems" [editSettings]='editing'>  
. . . 
    </ejs-grid> 
</div> 

App.component.ts 
    ngOnInit(): void { 
        this.data = orderDetails; 
        this.contextMenuItems = [ 
          { id: 'approveAll', text: 'Approve All', target: '.e-content'}, 
      { id: 'viewReport', text: 'View Report', target: '.e-content' }, 
       { id: 'approve', text: 'Approve', target: '.e-content'  }, 
      { id: 'delete', text: 'Delete', target: '.e-content'} 
    ]; 
        this.editing = { allowDeleting: true, allowEditing: true }; 
    } 
    ContextMenuOpen (args) { 
   let data: any = this.grid.getSelectedRecords()[0]; 
   if (data.OrderID %2 == 0) { 
this.grid.contextMenuModule.contextMenu.showItems(['Approve All','View Report']);   //dynamically showing the items based on condition 
   } 
   else { 
this.grid.contextMenuModule.contextMenu.hideItems(['Approve All','View Report']); //dynamically hiding the items based on condition 
   } 
        } 


                             https://ej2.syncfusion.com/angular/documentation/api/context-menu/#hideitems 


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

Regards, 
Thavasianand S. 


Hi Thavasianand,

It's worked. Thank you very much for the support.

Hariharan J V [Syncfusion]
Replied On June 18, 2019 10:08 AM UTC

Hi Neo, 
  
We are happy to hear that you issue has been resolved. 
  
Regards,
Hariharan 


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