Data Grid cell tabindex

Is there a way to skip over cells that are not editable?  I was thinking tabindex might achieve this, but haven’t been able to get it to work.

I’ve tried the following, but when I look in inspector, it still has a tabindex of 0.

<igx-column field=”invoiceDate” header=”Invoice Date” dataType=”date”>

<ng-template igxCell let-cell=”cell” let-value>

<span tabIndex=”-1″></span>{{ value | date: “MM/dd/yy” }}</span>

</ng-template>

</igx-column>

Hello,

Thank you for posting in our community.

I have created and attached a small sample demonstrating how to skip cells that are not editable using igxGrid's onGridKeydown event. Please test this sample on your side and let me know whether it resolves your issue.

Additionally, this thread in our GitHub repository could be of help to you.

4341.Sample.zip

Hi Martin, thanks for the sample.  It worked perfectly.  I did make a few changes to capture arrow right/left.  I don't suppose there's a way to capture tab left?

customKeydown(e) {

if (

e.targetType === "dataCell" &&

(e.event.key.toLowerCase() === "tab" ||

e.event.key.toLowerCase() === "arrowright" ||

e.event.key.toLowerCase() === "arrowleft")

) {

e.event.preventDefault();

e.cancel = true;

let cellPosition: ICellPosition = null;

if (

e.event.key.toLowerCase() === "arrowright" ||

e.event.key.toLowerCase() === "tab"

) {

cellPosition = this.grid.getNextCell(

e.target.rowIndex,

e.target.visibleColumnIndex,

(col) => col.editable

);

}

if (e.event.key.toLowerCase() === "arrowleft") {

cellPosition = this.grid.getPreviousCell(

e.target.rowIndex,

e.target.visibleColumnIndex,

(col) => col.editable

);

}

this.grid.navigateTo(

cellPosition.rowIndex,

cellPosition.visibleColumnIndex,

(obj) => obj.target.nativeElement.focus()

);

}

}

Hi Steve,

Indeed there is. You can check if the shift key is pressed during the keyboard event together with the tab key:

if (e.event.key.toLowerCase() === 'arrowleft' || (e.event.shiftKey && e.event.key.toLowerCase() === 'tab')) {
	cellPosition = this.grid.getPreviousCell(
		e.target.rowIndex,
		e.target.visibleColumnIndex,
		(col) => col.editable
	);
}

Please let me know if you need any further assistance with this matter.

Worked perfectly.  Thanks for all of your help!

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.