Context Menu

Context Menu

Posted by: hoang-nguyen on 14 September 2017, 3:12 am EST

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 3:12 am EST

  I am trying to add a context menu to my flexgrid on an ionic app.

  This is my html:

  <ion-content padding>
  
  <wj-flex-grid
  
  #flex [itemsSource]=“dataCollection”
  
  [autoGenerateColumns]=“true”
  
  [headersVisibility]=“1”
  
  [isReadOnly]=“true”
  
  wj-context-menu=“#idMenu”>
  
  </wj-flex-grid>
  
  <wj-menu id=“idMenu” ng-show=“false”>
  
  <wj-menu-item cmd=“cmdMenu1” cmd-param=“1”>Menu 1</wj-menu-item>
  
  <wj-menu-item cmd=“cmdMenu2” cmd-param=“2”>Menu2</wj-menu-item>
  
  </wj-menu>
  
  </ion-content>

  I do not know what I am missing

  When I ran it, right click of the mouse did not popup any context menu at all. What am I missing here? Thank you very much.

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Here is my sample code

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Sorry here is my sample code

  https://www.dropbox.com/s/8owe8z6ctfoypga/wijmoTest.zip?dl=0

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Hello Hoang,
  
  The problem in your code is with reference passed between FlexGrid and Menu. Please refer to the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/08/FlexGrid_contextmenu_select_row.zip

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Thank you sir. It works like a charm.

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Just one more question. If I need to show context menu only when user right click on column header, is there a way to achieve it? Thank you sir very much.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Hello Hoang,
  
  For this, you need to prevent contextmenu for cell type other than columnHeader. Please use the following code snippet for the same:

  this.flex.hostElement.addEventListener('contextmenu', (e) => {
              let ht = this.flex.hitTest(e);           
              if(ht.cellType!==wjGrid.CellType.ColumnHeader){
                  e.preventDefault();
                  e.stopImmediatePropagation();
              }
          },true);

  Hope it helps!

  Thanks,
  
  Manish Kumar Gupta

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Thank you Manish for quick replying. I have copied and tried your code. It is working like a charm. However, When I tried to change it to ionic’s style by seperating ts and html: This is what I did:

  TS:

  contextMenu(event) {
  
  let ht = this.flex.hitTest(event);

  if (ht.cellType !== wjGrid.CellType.ColumnHeader) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }
  

  }

  HTML:

  <ion-content padding>
  
  <wj-flex-grid
  
  #flex [itemsSource]=“dataCollection”
  
  [autoGenerateColumns]=“true”
  
  [headersVisibility]=“1”
  
  [isReadOnly]=“true”
  
  (contextmenu)=“contextMenu($event)”
  
  [wjContextMenu]=“ctxMenu”>
  
  </wj-flex-grid>

  <wj-menu
  
  #ctxMenu
  
  style=“display:none;”
  
  [header] = “‘Main Menu Test’”
  
  (itemClicked)=“menuItemClicked(ctxMenu, $event)”>

  <wj-menu-item [value]="'AutoSizeColum'">Auto Size Column</wj-menu-item>
  <wj-menu-item [value]="'AutoSizeRow'">Auto Size Row</wj-menu-item>
  <wj-menu-separator></wj-menu-separator>
  <wj-menu-item [value]="'ExportExcel'">Export Excel</wj-menu-item>
  <wj-menu-item [value]="'ExportPDF'">Export PDF</wj-menu-item>
  <wj-menu-separator></wj-menu-separator>
  <wj-menu-item [value]="'Print'">Print</wj-menu-item>
  <wj-menu-separator></wj-menu-separator>
  <wj-menu-item [value]="'Grouping'">Grouping</wj-menu-item>
  <wj-menu-item [value]="'People'">People</wj-menu-item>
  <wj-menu-item [value]="'Productivity'">Productivity</wj-menu-item>
  <wj-menu-separator></wj-menu-separator>
  <wj-menu-item [value]="'FreezePanes'">Freeze Panes</wj-menu-item>
  

  </wj-menu>
  
  </ion-content>

  It executed through contextMenu(e) function but did not prevent it from popping up on column header only. I checked futher and added
  
  event.returnValue = true;

  contextMenu(event) {
  
  let ht = this.flex.hitTest(event);

  if (ht.cellType !== wjGrid.CellType.ColumnHeader) {
    event.preventDefault();
    event.stopImmediatePropagation();
    event.returnValue = true;
  }
  

  }

  to it. It worked parttilally because the contecxt’s menu still show but under the browser’s menu. I guessed I miss another parameter to set. What I am missing here sir?

  https://www.dropbox.com/s/wyn1426z2ri4ht8/wijmoTest.7z?dl=0

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Hello Hoang,
  
  The reason for this is to capturing event. The code snippet provided in the previous reply is used capturing of event since the contextmenu is already captured by wjContextMenu property.
  
  Hence, you need to use the above provided solution.

  Thanks,
  
  Manish Kumar Gupta

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:12 am EST

  Thank you sir very much for clarification.

• 

  mayank.dixit

  • Post Options:
  • Link
    Copy

  Posted 23 August 2021, 10:50 pm EST

  Hi Team I am using Context-menu in Wijmo TreeView is there any way we can make WJ-menu-item as disable.
  
  Thank You

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 24 August 2021, 11:19 pm EST

  Hi,

  I have replied to your query on the post below:

  https://www.grapecity.com/forums/wijmo/-disabling-the-wj-menu-ite

  Regards,
  
  Ashwin