Disable items in wj context menu

Disable items in wj context menu

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

• 

  pritam1995kumar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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);
  

  	
  	[b]but new current requirement is not to hide instead disable that menu itms only (greyout and not clickable) ? [/b]

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  pritam1995kumar

  • Post Options:
  • Link
    Copy

  Posted 30 November 2018, 2:55 am EST

  Thank you sharad, looks promising. will try to implement this way

• 

  pritam1995kumar

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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