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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditionally hide a grid's custom context menu items

Thread ID:

Created:

Updated:

Platform:

Replies:

151393 Feb 10,2020 01:54 PM UTC Feb 12,2020 06:47 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Mithun
Asked On February 10, 2020 01:54 PM UTC

Hello SyncFusion Team,

I'm unable to figure out how to conditionally hide a grid's context menu items using the ContextMenuOpen event handler. (I'm using custom context menu items for the grid) 

In the past, I was able to do selectively hide context menu items for a diagram using DiagramBeforeMenuOpenEventArgs (see example here).

However no such facility exists for grid context menus. 

Any idea on how to work around this limitation?

Thanks,
Mithun 

Balaji Sekar [Syncfusion]
Replied On February 11, 2020 08:37 AM UTC

Hi Mithun, 
 
Greetings from Syncfusion support 
 
Query : Conditionally hide a grid’s custom context menu items. 
 
We have analyzed your query and prepared a sample according to that. In the below sample, we have rendered two different context menu items for grid content and grid headers. When you click on the respective item in the context menu, the corresponding action will done on grid. We have used the “Select” event of the context menu to achieve this action. Here in the header context menu, we have rendered two items “Hide column” and “UnHide column”. The hide item will show only when the respective column showed in the grid, and unhide item will show when the column is in hidden mode. Please refer the below code snippet and sample for more reference. 
 
App.component.ts 
 
<ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' id="gridcomp" allowPaging='true' allowSorting='true'  [contextMenuItems]="contextMenuItems" [editSettings]='editing' (contextMenuOpen)='open($event)'> 
        <e-columns> 
            .  .  .  .  .  .  .  .  
        </e-columns> 
    </ejs-grid> 
 
<div> 
  <ejs-contextmenu #contextmenu target='.e-content' [items]='menuItems' (created)='onCreated()' (select)='select($event)'></ejs-contextmenu> 
  </div> 
 
  <div> 
  <ejs-contextmenu #headercontextmenu target='.e-gridheader' (beforeOpen)='beforeOpen()' [items]='headermenuItems' (select)='select($event)'></ejs-contextmenu> 
  </div> 
 
App.component.html 
 
export class AppComponent { 
    public data: Object[]; 
    @ViewChild('grid') public grid: GridComponent; 
   @ViewChild('contextmenu') 
    public contextmenu: ContextMenuComponent; 
    @ViewChild('headercontextmenu') 
    public headercontextmenu: ContextMenuComponent; 
     public toolbar: string[]; 
     public menuItems: MenuItemModel[] = [ 
    { 
        text: 'Save Grid Changes' 
    }, 
    { 
        text: 'Print Preview' 
    }, 
    { 
        text: 'Show Summary' 
    }]; 
     public headermenuItems: MenuItemModel[] = [ 
    { 
        text: 'Hide Column' 
    }, 
    { 
        text: 'UnHide Column' 
    }, 
    { 
        text: 'Column background color' 
    }, 
    { 
        text: 'Reset color' 
    }]; 
 
    public contextMenuItems: any; 
    public editing: EditSettingsModel; 
 
beforeOpen(args): void { 
   if(this.grid.getColumnByField('ShipCountry').visible == true){                                                                                                                                                          document.getElementById("unhide").style.display = "none"; 
     document.getElementById("hide").style.display = ""; 
   } 
   else{ 
     document.getElementById("hide").style.display = "none";  
     document.getElementById("unhide").style.display = ""; 
   } 
} 
   
    select(args):void { 
       if(args.item.text === "Save Grid Changes") { 
         this.grid.editModule.batchSave(); 
       } 
       if(args.item.text === 'Print Preview') { 
        this.grid.print(); 
      } 
      if(args.item.text === 'Show Summary') { 
        this.grid.aggregates = [{ 
        columns: [{ 
            type: 'Sum', 
            field: 'Freight', 
            footerTemplate: 'Sum: ${Sum}' 
        }] 
        }] 
      } 
      if(args.item.text === 'Hide Column') { 
         this.grid.getColumnByField('ShipCountry').visible = false; 
         this.grid.refreshColumns(); 
       } 
       if(args.item.text === 'UnHide Column') { 
         this.grid.getColumnByField('ShipCountry').visible = true; 
         this.grid.refreshColumns(); 
       } 
       if(args.item.text === 'Column background color') { 
         (document.getElementsByClassName('e-headercell')[1] as any).style = "background-color: green"; 
       } 
       if(args.item.text === 'Reset color') { 
         (document.getElementsByClassName('e-headercell')[1] as any).style.cssText = ""; 
       } 
    }} 
 
 
 
Please get back to us if you need further assistance 
 
Regards 
Balaji Sekar. 


Mithun
Replied On February 11, 2020 09:07 AM UTC

Thanks Balaji, highly appreciate the stackblitz sample. Giving this a try now. Will revert back in case anything unexpected occurs. 

Balaji Sekar [Syncfusion]
Replied On February 12, 2020 06:47 AM UTC

Hi Mithun, 
  
We glad that your issue has been fixed.  
  
Please get back to us if you require further other 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