Conditionally hide a grid's custom context menu items

[Mithun]

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]

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 = ""; 

       } 

    }} 

 

Sample: https://stackblitz.com/edit/angular-yaukwy-23mhm4?file=app.component.ts 

 

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

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

 

Please get back to us if you need further assistance 

 

Regards 

Balaji Sekar. 

[Mithun]

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

[Balaji Sekar]

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.