Context Menu

Originally Posted 16 August 2017, 6:26 pm EST

  • Originally Posted 16 August 2017, 6:26 pm EST

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

    This is my html:


    #flex [itemsSource]="dataCollection"
    [autoGenerateColumns]="true"
    [headersVisibility]="1"
    [isReadOnly]="true"
    wj-context-menu="#idMenu">


    Menu 1
    Menu2



    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.
  • Reply

    Here is my sample code
  • Reply

    Sorry here is my sample code

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

    Reply

    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.
  • Reply

    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
  • Reply

    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:


    #flex [itemsSource]="dataCollection"
    [autoGenerateColumns]="true"
    [headersVisibility]="1"
    [isReadOnly]="true"
    (contextmenu)="contextMenu($event)"
    [wjContextMenu]="ctxMenu">


    #ctxMenu
    style="display:none;"
    [header] = "'Main Menu Test'"
    (itemClicked)="menuItemClicked(ctxMenu, $event)">

    Auto Size Column
    Auto Size Row

    Export Excel
    Export PDF

    Print

    Grouping
    People
    Productivity

    Freeze Panes




    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
  • Reply

    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
  • Reply

    Thank you sir very much for clarification.
  • Reply

    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
  • Reply

    Thank you sir. It works like a charm.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels