0

I have the requirement for an cell editable table, where the keyboard navigation will skip certain cells, but I need the cells to be editable if the user were to click on them.

There are 3 columns. When the user tabs out of the last editable field in a column, I want to add a new row, and place the editor in the 3rd editable column on the new row. Skipping row 1 and 2. But they can still go back and edit those.

  • I have tried playing with tabindex but it did nothing.
  • I tried accessing the editableColumns as viewChildren, but the editable column of the new row doesn't really exist this way until after the tab handler.
  • Also have noticed that using editableColumn.openCell() sort of works, but then the styling of the table goes funny, and the cell is not really focused.

Any hints on how to accomplish this with the table API from prime-ng would be greatly appreciated.

WizardsOfWor
  • 2,974
  • 29
  • 23

1 Answers1

0

You can handle keydown event on input template at 3rd column, like this

<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData.field_3" (keydown.tab)="onTabPress($event, i)">
</ng-template>

And in ts file, add new row and focus to 3rd cell by easiest way, or by your way

onTabPress(e, i) {
    if (i == this.data.length - 1) {
      this.data.push({
        field_1: '',
        field_2: '',
        field_3: ''
      });
      setTimeout(() => {
        $('tr').eq(i + 2).find('td').eq(2).click();
      });
    }
  }

I created a demo here. Hope this help

phucnh
  • 1,020
  • 6
  • 14
  • 2
    Thanks very much for your answer. Everything I have read has recommended not using libraries like jQuery with angular. this does work, but wondering if there is a way to do it without jquery using the primeng APIs instead? – WizardsOfWor Sep 26 '19 at 20:26
  • You can use ViewChild type ElementRef and access nativeElement methods or properties – phucnh Sep 27 '19 at 03:51