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

Conditionally hide a grid's custom context menu items

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 

3 Replies

BS Balaji Sekar Syncfusion Team 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. 



MI Mithun 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. 


BS Balaji Sekar Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon