Disable items in wj context menu

Posted by: pritam1995kumar on 26 November 2018, 8:12 am EST

  • Posted 26 November 2018, 8:12 am EST

    Hi Team,

    I have a array declared in the component.ts file for the contect menu

      intakeGridMenu = [
    { header: 'menu 1', context: 3, suppOnly: false, intlOnly: false },
    { header: 'menu 2', context: 1, suppOnly: false, intlOnly: false },
    { header: 'menu 3', context: 1, suppOnly: false, intlOnly: false },
    { header: 'menu 4', context: 1, suppOnly: false, intlOnly: false },
    { header: 'menu 5', context: 1, suppOnly: true , intlOnly: false},
    { header: 'menu 6', context: 1, suppOnly: true , intlOnly: false}
    ];


    we have a requirement for dynamic contexmenu based on the row and col selected, which we are acheiving through below code
    by using the above flags

      grid.addEventListener(grid.hostElement, 'contextmenu', (e) => {
    const ht = grid.hitTest(e);
    console.log('ht', ht);

    let items = this.intakeMenu.collectionView.sourceCollection;
    const [row, col] = (wjc.format('{row}, {col}', ht)).split(',');

    if((row > 10){
    items = this.newItems.filter((item, i) => (i === 0) ? true : item.suppOnly || item.intlOnly);
    this.intakeMenu.collectionView.sourceCollection = items;
    } else if (row > 10 && row < 15) {
    items = this.newItems.filter((item, i) => (i === 0) ? true : item.suppOnly);
    this.intakeMenu.collectionView.sourceCollection = items;
    };
    }, true);


    but new current requirement is not to hide instead disable that menu itms only (greyout and not clickable) ?
  • Marked as Answer

    Replied 27 November 2018, 1:49 am EST

    You may assign a command object with canExecuteCommand method to the command property of the menu to disable some of the items of the menu.
    Please refer to the following sample: https://stackblitz.com/edit/angular-4nbend?file=src%2Fapp%2Fapp.component.ts
    You may read more about command property here: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.input.Menu.Class.html#command

    ~Sharad
  • Replied 30 November 2018, 2:55 am EST

    Thank you sharad, looks promising. will try to implement this way
  • Replied 4 February 2019, 2:39 am EST

    Hi Sharad,

    I tried to implement the above logic in our codebase bot it's not working as expected . In stackblitz the below code block is working properly

      initMenu(menu){
    menu.command = {
    canExecuteCommand: (item) => {
    return !item.isDisabled;
    }
    }
    }

    but in our code base the menu object is undefined, and sometimes it's behaving strangely by not even invoking the initmenu method. In HTML I cross verified the template reference variable. It's correct but not working properly.
  • Replied 5 February 2019, 7:22 am EST

    Hello Pritam,
    Could you please share the following for further investigation so that we may assist you accordingly?
    1. Code-snippet for Menu (HTML+TS)
    2. Wijmo Version
    3. Stripped down sample depicting your issue if possible

    ~Manish
Need extra support?

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

Learn More

Forum Channels