Flexgrid cell focus on Enter keypress

Flexgrid cell focus on Enter keypress

Posted by: flynnbe on 14 September 2017, 11:21 am EST

• 

  flynnbe

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hi, I’m using the wijmo 5 flexgrid in PureJS.

  When a cell is edited and Enter is pressed the focus drops to a cell on the row below. Could you tell me how to get the behaviour so that the focus automatically goes to the next cell on the same row on an Enter keypress. Thanks

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hello,

  You would need to cancel the selectionChanging event of FlexGrid to cancel the default selection operation performed when the user presses the Enter key. Later, you can handle the keyDown event of the host element of FlexGrid to capture the Enter key press and select the cell adjacent to the active cell.

  Kindly refer to the attached HTML Page(EnterFocusGrid.html) which implements the same. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2015/07/EnterFocus.html

  2015/07/EnterFocusGrid.html

• 

  flynnbe

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Thanks for the response Manpreet. The example doesn’t quite work perfectly in that if you’re not editing a cell but press enter then focus moves down a row.

  To replicate press enter twice in succession.

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hello,

  The sample provide above was designed to handle the scenario described earlier i.e. handling the Enter key navigation, when the cell is in edit mode.

  I have updated the sample to handle the Enter key navigation for both the scenarios i.e. when the cell is in edit mode and when the cell is not in edit mode. Kindly refer to the same.

  Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2015/07/EnterFocusNew.html

• 

  arun.gupta

  • Post Options:
  • Link
    Copy

  Posted 23 September 2017, 3:36 am EST

  Hello, Manpreet,

  On enter key press I want to move the focus out of the grid. Can you please me out for this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 7:25 am EST

  Hi Arun,
  
  Using Tab key focus can be out from FlexGrid since Tab is used to change focus between elements in the browser.

  However, you still need to focus out from FlexGrid on Enter key, you need to find the next element to the FlexGrid and focus to that in keydown event.

  Please refer to the attached code snippet for handing keydown event:

  
  flex.hostElement.addEventListener("keydown",function(e){
  /// code here
  });
  
  

  Thanks,
  
  Manish Kumar Gupta

• 

  deepak.dubey

  • Post Options:
  • Link
    Copy

  Posted 15 June 2020, 2:25 am EST

  HI,

  I have same scenario, I want to trigger focus on key press using below code

  componentObject.grid.hostElement.addEventListener(“keydown”,function(e){
  
  if(kerRef)
  
  kerRef.handleKeyEv(e);
  
  });
  
  which is working fine but also cells are going in edit mode and this not like I want it.
  
  I want do nothing from gird side when we trigger such a key from my end.

  Regards
  
  Deepak Dubey

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 June 2020, 2:23 am EST

  Hi Deepak,

  Can you please explain what is your exact requirements are? In this thread, there are multiple requirements regarding the focus. Also, can you let us know what is kerRef and what does the handleKeyEv method does?

  Regards,
  
  Ashwin