Unable to move row selection using custom next/previous button

Unable to move row selection using custom next/previous button

Posted by: jyoti.sinha on 7 June 2021, 4:46 am EST

• 

  jyoti.sinha

  • Post Options:
  • Link
    Copy

  Posted 7 June 2021, 4:46 am EST

  Hi,

  I have a scenario where the row selection would move using custom next/previous button as it does using up/down arrow key on keyboard. Want the same behavior but with custom buttons.

  I have tried dispatching ‘keydown’ event on wijmo host element on button click like below:

  
  grid.hostElement.focus();
  grid.hostElement.dispatchEvent(new KeyboardEvent('keydown', {
  	key: 'arrowdown'
  }));
  
  

  but it’s not working as expected. I noticed it’s not calling the grid selectionChange event which normally gets called using up/down key. Can you please suggest whether there is a way to achieve this?

  Thanks & Regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 June 2021, 10:30 am EST

  Hi Jyoti,

  Yes, you can achieve similar functionality by changing the current position of collectionView. Please refer to the code snippet:

  document.querySelector("#up").addEventListener("click",(e)=>{
      if(theGrid.collectionView.currentPosition > 0 ){
          theGrid.collectionView.currentPosition = theGrid.collectionView.currentPosition - 1
      }
  })
  
  document.querySelector("#down").addEventListener("click",(e)=>{
       if(theGrid.collectionView.currentPosition >= 0 ){
          theGrid.collectionView.currentPosition = theGrid.collectionView.currentPosition +1 
      }
  })  
  
  

  https://codesandbox.io/s/gallant-almeida-lgc0w

  Regards,
  
  Ashwin