Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daniel Komrakov
45
Tab-interaction in igx-grid edit-Mode in case of column's [editable] is depending on data
posted

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

Parents
  • 2680
    Offline posted
    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
Reply Children