Not loading Context Menu items

[Neo]

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]

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 

   } 

        } 

} 

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

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

Sample: https://stackblitz.com/edit/angular-145265-context-menu?file=app.component.html 

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

Regards, 

Thavasianand S. 

[Neo]

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 

   } 

        } 

} 

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

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

Sample: https://stackblitz.com/edit/angular-145265-context-menu?file=app.component.html 

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]

Hi Neo, 

  

We are happy to hear that you issue has been resolved. 

  

Regards,
Hariharan