Tab-interaction in igx-grid edit-Mode in case of column's [editable] is depending on data

Hi

I have a column(ContactDate) in an igx-grid which is editable just for part of rows.

To achieve that I use the following code:

    <igx-column field=”ContactDate” [editable]=”true”>

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

          {{cell.value}}

        </ng-template>

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

          <span *ngIf=”cell.rowData.Archived”>{{cell.value}}</span>

          <igx-date-picker

            *ngIf=”!cell.rowData.Archived”

            [(ngModel)]=”cell.rowData.ContactDate”

          ></igx-date-picker>

        </ng-template>

      </igx-column>

In case of edit-mode of the previous cell if ‘tab’ is pressed my ‘ContactDate’-column gets focused.

How to prevent that for cases when the column for the row is not editable?

I use the version 11.1.4

Working example: stackblitz.com/…/github-srbuis-dpvliy

Hello Daniel,

 

Thank you for the provided sample.

 

I have been looking into your requirement and introduced some custom logic in your sample in order to skip the non-editable cell when navigating through the grid in edit mode.

 

To achieve this, we can make use of the IgxGridBaseDirective’s activeNodeChange event and some of its API methods as well as the IgxGridNavigationService. The solution involves retrieving the previous, current and next cells upon change of the active node and checking whether the current cell’s column is the "ContactDate" and if its rowData’s “Archived” property is true. If so, the current selection is cleared and the active node is set to the next cell, which also enters edit mode. Additionally, since we only want to perform this when editing, a check is made for whether the previous cell was in edit mode. In this way we can still navigate through the non-editable cell using the arrow keys in normal mode.

 

If you like, you could also use the IgxGrid’s cellEditEnter event to check whether the cell is editable according to the above mentioned properties and cancel entering edit mode if so:

 

public handleCellEditEnter(event) {
    if (event.column.field === "ContactDate" && event.rowData.Archived) {
      event.cancel = true;
    }
  }

 

Here you will find the modified sample. Please, test it on your side and let me know if I may be of any further assistance.

 

Sincerely,
Bozhidara Pachilova
Associate Software Developer

Thanks for a prompt answer.

There is only one thing I don't understand: provided solution doesn't work for shift-tab.

For some reason prevCell.editMode is false in the case despite it was in the mode. 

Hello Daniel,

 

Since this can be considered a custom application-level solution regarding the IgxGrid Keyboard Navigation, it is possible that not all scenarios are covered.

 

The “Shift” + “Tab” backward navigation does not currently work, because it is not accounted for and the next cell, after the one to be skipped, is currently calculated based on the next position. In order to include the “Shift” + “Tab” use-case, the sample can be modified, so that we register whether the “Shift” Key was pressed on entering cell edit mode. This can be done in the cellEditEnter event as it fires before the activeNodeChange when navigating through the grid with the keyboard in edit mode. Its event arguments expose a “shiftKey” property and based on it a boolean flag “wasShiftInEditMode” can be toggled. Then the modification in the activeNodeChange the consists of checking this flag and simply switching the previous and next cell positions for the two cases.

 

Please, check out the modified sample on the same link here. If you require any further assistance on the matter, please let me know.

 

Sincerely,
Bozhidara Pachilova
Associate Software Developer

I use the version 9.1.10.

For me the 'activeNodeChange' event not working. And getting error on below lines of code

           

this.grid.navigation.setActiveNode({
	row: nextPosition.rowIndex,
	column: nextPosition.visibleColumnIndex
});
args.target.setEditMode(true);

Is there have any other example for version 9.1.10. for the same issue.

Thanks & Regards,

Santu

Hello Santu,

Thank you for reaching out.

By referring to the IgxGridComponent API for the latest patch of version 9.1.x (that would be 9.1.28) here I determined that the activeNodeChange event is not exposed in this version. Additionally, please keep in mind that version 9.1.x is expired and no longer eligible for support. It does not receive any new features, nor fixes since a while ago. The currently supported versions of Ignite UI for Angular are 12.3, 13.2 and 14.1, where the activeNodeChange event is exposed. My suggestion is to upgrade your project’s Angular and Ignite UI versions to the latest in order to take advantage of all introduced fixes and enhancements since then. I recommend reviewing our Update guide for a detailed walk-through on upgrading your app.

Finally, my suggestion is also to create separate support cases or forum threads for subsequent queries, as this will ensure that all your issues are addressed and tracked correctly.

Thank you for understanding.

Best regards,
Bozhidara Pachilova
Associate Software Developer