Disable default context menu for wj-pivot-grid

Disable default context menu for wj-pivot-grid

Posted by: bhati.bhati on 25 August 2019, 11:27 pm EST

• 

  bhati.bhati

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 August 2019, 11:27 pm EST

  Hi,

  How can I disable default context menu for wj-pivot-grid. I want to make it invisible.

  Thanks,
  
  Deepak

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 4:18 pm EST

  Hi Deepak,

  If you wish to show the default browser context menu then you may set the customContextMenu property of PivotGrid to false.

  <wj-pivot-grid [customContextMenu]="false" ...></wj-pivot-grid>
  

  But, if you wish to hide the default browser menu also, then in addition to setting the customContextMenu to false, you will also need to handle the contextmenu event listener to the host element of the PivotGrid and call the preventDefault method:

  pivotGrid.hostElement.addEventListener('contextmenu', e => {
  	e.preventDefault();
  }, true)
  

  Regards,
  
  Ashwin

• 

  bhati.bhati

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 6:08 pm EST

  Thanks Ashwin,

  It works like a charm.

  Regards,
  
  Deepak

• 

  hussein.khatib

  • Post Options:
  • Link
    Copy

  Posted 25 March 2024, 5:21 pm EST

  Hi,
  
  Is it possible to customize the right-click menu on the default browser to add options for controlling subtotal display per dimension?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 27 March 2024, 11:29 pm EST

  Hi Hussein,

  We have already answered this query on our other portal, here’s a copy of the response -

  You can set the ‘customContextMenu’ property of the PivotGrid to false, to hide the default context menu of the grid and handle the ‘contextmenu’ event on the PivotGrid’s host element to show a custom context menu as per your requirements, you can use Wijmo’s Menu control as a custom context menu.

  Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/react-9n92j7?file=index.js

  In the above sample, we have added the ‘RemoveField’ and ‘ToggleSubtotals’ options in the context menu, you can modify the menu options as per your requirements.

  Regards