FlexGrid scrolling page up on context menu

FlexGrid scrolling page up on context menu

Posted by: mauro on 9 July 2020, 9:12 am EST

• 

  mauro

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 July 2020, 9:12 am EST

  Hi there,

  is there a way to avoid the grid scrolling the page when selecting and clicking on a menu item?

  to see this effect click on Grid link then right click Select all in the example below.

  https://stackblitz.com/edit/react-yxjzgp?file=Grid.js

  Many thanks
  
  Kind regards,
  
  Mauro

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2020, 6:20 am EST

  Hi Mauro,

  This is default browser behavior that when an element gets focused if it is not completely visible on the screen, browser scroll to bring the element on the screen.
  
  I have updated the sample to demonstrate the issue without using wijmo:
  
  https://stackblitz.com/edit/react-zkdpbo?file=Home.js
  
  In the sample above, click “Click me to focus div” button and observe that browser scrolls to bring div into view as much as possible.
  
  Further, to workaround the issue using grid, you may focus the first cell of the grid inside the click handler for context menu so that browser won’t scroll. Please refer to the following code snippet or you may also refer to the “grid” link of the above sample

   menuItemClicked = (s, e) => {
      let grid = this.gridRef.current.control;
      var cell = grid.hostElement.querySelector(".wj-cell");
      cell.focus();
    }
  

  Regards