1. Home
  2. Forum
  3. Angular - EJ 2
  4. Show the custom context menu when we right-click on the column header

Show the custom context menu when we right-click on the column header

Hello there,

I have a context menu on the grid with custom entries. When I right-click on a data row, it appears. when the user right-click on the column headers, I have to show context menu as well.  Column filters are in place and cannot use column menu feature for this. I have several grids on my view and cannot set target='.e-gridheader' for the context menu as the same context menu starts appearing on column headers of other grids.
I found a similar exmple here.

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

But this will effect all the grids on the page and all will start showing the same context menu at header right click.

Appreciate your help on this.


Thanks and regards,

Yasas.

3 Replies
DR Dhivya Rajendran Syncfusion Team February 25, 2020 01:09 PM UTC

Hi Yasas, 

Greetings from Syncfusion. 

Query: same context menu starts appearing on column headers of other grids. 

We have validated the provided information and we suggest you to use the below way to achieve your requirement. In the below sample, we have bind beforeOpen event of the contextMenu component. In that we have identified the clicked grid with the help of the mouse event argument which is sent in the beforeOpen event. Based on the grid we have hide and show the context menu items for each grids. Using the select event we have performed the operations for each context menu items. We have shared the sample for your reference. 

Code Snippet:  
App.component.ts 

     public headermenuItems: MenuItemModel[] = [ 
    { 
        text: 'Hide Column', 
        id:'hide' 
    }, 
    { 
        text: 'UnHide Column', 
        id:'unhide' 
    }, 
        { 
        text: 'Sort Column', 
        id:'sort' 
    }, 
    { 
        text: 'Clear Sort', 
        id:'unSort' 
    }, 
    ]; 

  beforeOpen(args): void { 
    this.headercontextmenu.showItems(['Sort Column', 'Clear Sort', 'UnHide Column', 'Hide Column']); 
    if (parentsUntil(args.event.target, 'first', true)) {   // checks  the grid id with the target element’s parent until it matches with the id. 
      if (this.grid.getColumnByField('ShipCountry').visible == true) { 
        this.headercontextmenu.hideItems(['UnHide Column', 'Sort Column', 'Clear Sort']); 
      } 
      else { 
        this.headercontextmenu.hideItems(['Hide Column', 'Sort Column', 'Clear Sort']); 
        this.headercontextmenu.showItems(['UnHide Column']); 
      } 
    } else { 
      this.headercontextmenu.hideItems(['UnHide Column', 'Hide Column']); 
      this.headercontextmenu.showItems(['Sort Column', 'Clear Sort']); 
    } 

  } 


App.component.html 

<div> 
  <ejs-contextmenu #contextmenu target='.e-content' [items]='menuItems' (select)='select($event)'></ejs-contextmenu> 
  </div> 

  <div> 
  <ejs-contextmenu #headercontextmenu target='.e-gridheader' 
  [items]='headermenuItems' (beforeOpen)='beforeOpen($event)' (select)='select($event)'></ejs-contextmenu> 
  </div> 

Sample Link: 
 
Documentation Links: 

Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


YP Yasas Petangoda February 26, 2020 05:52 AM UTC

Hi Dhivya,

Awesome. That worked. Thanks a lot for the support. 

Best Regards,

Yasas

PK Prasanna Kumar Viswanathan Syncfusion Team February 27, 2020 10:32 AM UTC

Hi Yasas, 
 
We are happy to hear that your issue has been solved. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon