How to edit next row when tab is hit on the last column of the previous row

Question

Hi,I need to customize the grid such that when the user hits tab key on the last column of the row, saves the changes and directly gets into edit mode of the next row.Can this be achieved?Thanks and regards

Ajith Govarthan · Answer

Hi Oscar Estrada, 

Thanks for contacting Syncfusion support. 

Based on your query you want to edit the next row when you reach the last column in edit mode. So, we have prepared sample in that we have used the keydown event to achieve your requirement. Using the keydown event, we have saved the row with endEdit method and using the actionComplete event we have selected the next row and edited the selected row as per your requirement. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 




App.component.ts 

actionComplete(args) { 
    if (args.requestType === 'save' && this.isTabPressed) { 
      setTimeout(() => { 
        if (this.grid.getRows().length - 1 > args.rowIndex) 
          this.ispreventSelection = true; 

        this.grid.selectRow(args.rowIndex + 1);  // select the next row to perform edit operation 
      }, 30); 
    } 
  } 

   
  rowSelected(args) { 
    if (this.isTabPressed && this.ispreventSelection) { 
      this.isTabPressed = false; 
      this.ispreventSelection = false; 
      this.grid.startEdit(); // edit the selected row. 
    } 
  } 

  public keyHandler(e) { 
    if (e.keyCode === 9 && this.grid.isEdit) { 
      let rowEle = parentsUntil(e.target, 'e-row', false); 
      let cellEle = parentsUntil(e.target, 'e-rowcell', false); 
      let rowInfo = this.grid.getRowInfo(rowEle); 
      if ( 
        this.grid.getVisibleColumns().length - 1 === 
        (cellEle as any).cellIndex 
      ) { 
        this.isTabPressed = true; 
        this.grid.endEdit(); // save the current edited row here 
      } 
    } 
  } 

Sample Link: https://stackblitz.com/edit/angular-248792-disable-keyaction-6n8nvc?file=app.component.html 

Please get back to us if you need further assistance. 

Regards, 
Ajith G.