Wijmo 5 Flex Grid Tab Key navigation

Wijmo 5 Flex Grid Tab Key navigation

Posted by: grapecity on 2 October 2017, 2:43 am EST

• 

  grapecity

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 October 2017, 2:43 am EST

  Hello,
  
  Wijmo Team.
  
  I am using Angular 2 and Wijmo 5 on our ERP System. Now, I have a question about tab key. When I press tab key, the courser is jump to the next column of the grid. Is there any setup or example for me to change this behavior to jump to next editable column directly? This can make out project has better performance. Because most of our customers doesn’t like to use mouse when they input data, they love to use keyboard only. So, we need that behavior for make it faster when they are using keyboard to jump to next editable column.

  Thanks,
  
  Boyang Zhang

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 3 October 2017, 1:27 am EST

  Hi,

  With this code I use TAB to switch columns and jump over read only cells.

  
  
  <wj-flex-grid #flex 
          [itemsSource]="data" 
          [selectionMode]="selectionMode"
          (initialized)=initFlex(flex,$event) 
          (keydown)=onFlexKeyPress(flex,$event)
          style="height:500px;width:500px"></wj-flex-grid>
  
  
  

  
  
    onFlexKeyPress(s: wjGrid.FlexGrid, e: any){
      const n = (window.event) ? e.which : e.keyCode;
      if (n === 9) {
          if (s.selection.col === s.columns.length - 1) {
              if (s.selection.row === s.rows.length - 1){
                  return true;
              }
              let i = 0;
              while (s.columns[i].isReadOnly) {
                  i++;
              }
              s.select(new wjGrid.CellRange(s.selection.row + 1, i));
          } else {
              let i = s.selection.col + 1;
              while (s.columns[i].isReadOnly) {
                  i++;
              }
              s.select(new wjGrid.CellRange(s.selection.row, i));
          }
          return false;
      }
    }
  
  
  

  Hope this helps.

  ~nilay

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 4 October 2017, 10:59 am EST

  Hi Nilay,
  
  Thank you for your code. I will try it.

  Boyang

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 4 October 2017, 11:09 am EST

  Hi Nilay,
  
  I haven’t seen any event of key press. How do I bind it with the grid?
  
  I am using Angular 2 and Wijmo 5.

  Boyang Zhang

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 October 2017, 4:57 pm EST

  Hi Boyang,
  
  You need to handle keyDown event for the same. The keyDown event can be handled using addEventListener for FlexGrid hostElement. Please refer to the following code snippet for the same:

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

  Alternatively, you can also handle selectionChanging event and cancel event if column is not editable and select next column using code.

  ~Manish Kr Gupta

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 9 October 2017, 11:14 am EST

  Thanks, Manish & Nilay.

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 27 May 2019, 7:54 pm EST

  Hi,

  After the user has entered data using the keydown event, how I should set the data into the model so that the entered/updated data should be sent when user submits the form ?

  –Mayank