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,
I have created a StackBlitz sample for you reference. Please test it on your side and let me know if it meets your requirement.