CODEWITHSUNDEEP
htmlangulartypescript
Naresh B
Naresh B

Reputation: 11

In Angular Table how to set focus to move next row when we enter value in last cell of first row then press Enter key

Issue: For first row by default focus is coming by default When there is no next cell in first row, focus should move to next row.

    <!-- HTML file-->
      <tbody>
                <tr *ngFor="let row of rows;let i=index;" [class.selectedRow]="rowIsSelected(row)" [class.active]="isContainerSelected(row)" style="cursor: pointer;">
                    <td contenteditable="true" (keydown.enter)="catchScaningId($event)"></td>
                    <td contenteditable="true" (keydown.enter)="cellChanged($event)"> </td>
                </tr>
            </tbody>

// .TS file // Once first row last cell completed focus is not moving to next row

   catchScaningId(event: any) {
           this.setFocus(event);
      }
   cellChanged(event: any) {
          this.setFocus(event);
       }
        
   setFocus(event: any) {
            let element;
            if (event.code === 'Enter')
              element = event.srcElement.nextElementSibling;
            if (element == null) {
            event.preventDefault();
                       
        //TODO: element.focus();  // When there is no next cell, focus should move to next row
            }   else {
                  event.preventDefault();
                  element.focus();
                }
        
          }

Upvotes: 1

Views: 3834

Answers (2)

Naresh B
Naresh B

Reputation: 11

// Solution :I have added small changes to above code its working .

<td #td ...>  //In html

//TS file.

@ViewChildren('td') cells: QueryList<ElementRef>;
onKeydown(e: any) {
   let cellsArray= this.cells.toArray();
   const idx = cellsArray.findIndex(z => z.nativeElement === e.target);
   cellsArray[idx+1].nativeElement.focus();
 }

Upvotes: 0

Aviad P.
Aviad P.

Reputation: 32639

Tag your td elements, use ViewChildren and when the event occurs, find event target in the list, and focus the next one.

<td #td ...>

@ViewChildren('td') cells: QueryList<ElementRef>;

onKeydown(e: any) {
  const idx = this.cells.toArray().findIndex(z => z.nativeElement === e.target);
  this.cells[idx + 1].nativeElement.focus();
}

Upvotes: 1

Related Questions