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 |
![]() |
Tags: Grid |
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
}
}
}
|
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.tsngOnInit(): 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}}}
Please get back to us, if you need further assistance.
Regards,Thavasianand S.
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.
This page will automatically be redirected to the sign-in page in 10 seconds.