Set Focus on first cell of new row

I am using an onGridKeydown event to add a new row of an igx-grid which is editable by the user.

The question I have is how can I set focus on the first cell of the new row when my onGridKeydown event fires?

Here is an example of my code.

public customKeydown(args: IGridKeydownEventArgs) {

const target: IgxGridCellComponent = args.target as IgxGridCellComponent;
const evt: KeyboardEvent = args.event as KeyboardEvent;
const type = args.targetType;

if (type === ‘dataCell’ && evt.key.toLowerCase() === ‘arrowdown’) {

const currentRowId = +this.grid1.data[this.grid1.data.length – 1].Id;
const newRowId = currentRowId + 1;

this.grid1.addRow({
Id: newRowId,
Code: ”,
Currency: ”,
Amount: null
});

this.grid1.updateRow({}, newRowId); // Sets focus on new row.

// Logic to set  focus on first cell……???

}

}

Hello Jason,

Thank you for posting in our community.

My suggestion is to use the navigateTo method of igxGrid:

//...
this.grid1.navigateTo(newRowId, 0, (args) => { args.target.nativeElement.focus(); });
//...

Hi, I tried this solution but it says 'ERROR TypeError: Cannot read property 'navigateTo' of undefined'. Could you please help me understand what's wrong?

Hello,

Thank you for posting in our community.

I have created a StackBlitz sample for you reference. Please test it on your side and let me know if it meets your requirement.