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

Not loading Context Menu items

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.


3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team June 17, 2019 05:34 AM

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. 



NE Neo replied to Thavasianand Sankaranarayanan June 18, 2019 12:42 AM

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.


HJ Hariharan J V Syncfusion Team June 18, 2019 02:08 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon