Igniteui-angular: How to skip cell navigation on non-editable column on Tab key hit

[ymita]

Question

I have a question about igxGrid. After selecting a cell, hitting Tab key moves active cell to the next one by default. Now how can I skip cell when it is not editable? (And the focus moves to the next editable cell.)

• igniteui-angular version: 7.1.8
• browser: n/a

As far as I tested,

1. I handled document's keyup event, however, focus rectangle is visible for a short period time and I wonder if there is a better way to achieve the scenario.

  @HostListener('document:keyup', ['$event'])
  onkeyup(event) {
    console.log('onkeyup ', event);
    const cells = this.grid.selectedCells as Array<IgxGridCellComponent>;
    const firstSelectedCell = cells[0];
    if (!firstSelectedCell.column.editable) {
      cells[0].dispatchEvent(event);
    }
  }

1. onFocusChange fires earlier than cell focus completes and it seems this is not the right timing.
2. I could not find a way to make this work on onSelection timing.

Here is the sample I am working on. app1.zip

[kdinev]

@ymita Try doing it on keydown.

[ymita]

@kdinev
Thanks for your suggestion. I checked keydown but it is captured by igxGrid so that it does not fire while focus is on igxGrid.

My initial approach does not meet my requirement as activation rectangle is visible for a while. As another approach, I attempted to use onFocusChange instead. This event is fired before cell focus moves. So I tried cancelling the post process of this event and setting cell focus. With this approach, the number of focus rectangle increases as I hit Tab on igxGrid. My assumption is that focused cell is exclusive, and no multiple focused cell in the same time. Is there any recommendation on how to achieve my requirement?

  focusChange(args: IGridFocusChangeEventArgs) {
    args.cancel = true;
    const cells = args.cell.row.cells.toArray() as Array<IgxGridCellComponent>;
    cells[2].focused = true;
  }

[kdinev]

@ymita Focus as a native browser event is not an event that can be prevented, so the way is to move the focus wherever you need, which may cause some flicker. I think the best person to give you a suggestion on how to handle this is @ddincheva as she's the expert on the grid keyboard nav topic.

[ymita]

I hide cell's focus border by css.

:host::ng-deep .skipped-cell.igx-grid__td--active {
    box-shadow: inset 0 0 0 1px transparent;
}
:host::ng-deep igx-grid-row:hover .skipped-cell.igx-grid__td--selected {
    color: black;
}
:host::ng-deep .skipped-cell.igx-grid__td--selected {
    color: rgba(0, 0, 0, 0.74);
    background-color: transparent;
}

<igx-grid #grid
  [data]="localData" [primaryKey]="'id'"
  [autoGenerate]="false" width="700px" height="500px">
    <igx-column *ngFor="let column of columns"
                [field]="column.field"
                [header]="column.header"
                [editable]="column.editable"
                [cellClasses]="column.cellClasses"
                >
    </igx-column>
</igx-grid>

app1 (2).zip

[ddincheva]

Hello @ymita ,
Currently implementing this behavior in not possible, because the IgxGrid does not expose public API methods that will allow you to perform a scroll to a specific element (row/column/cell). And due to implementation specifics related with the grid's virtualization, you can get only the objects that are currently in the view, so in order to be able to enter edit mode for specific cell you should first scroll to that element.
Anyway this problem is already addressed in our repository (Issue: #4054 ), so we will provide a more flexible way to override the default keyboard navigation that the igxGrid provides.

[ddincheva]

Closing this issue, because discussion of this matter is continued in #4054