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
Harish V
0
When a cell that is not editable has the focus, tabbing is disabled When a cell that is not editable has the focus, tabbing is disabled When a cell that is not editable has the focus, tabbing is disabled
posted

If a cell has the focus and the cell is for a column that is marked as non-editable or the editCellStarting returns false for any reason, the keyboard navigation(Tab Click) no longer works by skipping to the next editable cell in the grid.

Angular version: 17.0.5

infragistics version: 17.0.5
Parents
No Data
Reply
  • 460
    Offline posted

    Hello,

    Thank you for reaching out regarding the described behavior you're experiencing with the igx-grid component's keyboard navigation.

    I have been looking into your question and I attempted to reproduce the described behavior in a sample application, but everything seems to be working correctly. Here is the sample I created for your reference: Sample Link.

    In this sample, I have set up an igx-grid with some columns marked as editable and others as non-editable:

    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="100%" height="650px">
    <igx-column field="ProductID" header="Product ID"></igx-column>
    <igx-column field="ProductName" header="Product Name" [dataType]="'string'" [editable]="true"></igx-column>
    <igx-column field="UnitPrice" header="Unit Price" [dataType]="'string'" [editable]="false"></igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'"  [editable]="true"></igx-column>
    <igx-column field="ReorderLevel" header="Reorder Level" dataType="number" [editable]="true"></igx-column>
  </igx-grid>

    Steps to Reproduce

    1. I enter an editable cell (e.g., "Product Name").
    2. I press the TAB key.
    3. The focus moves to the next editable cell, skipping over the non-editable cells (e.g., "Unit Price").

    This behavior is as expected. Editable cells are focused sequentially while non-editable cells are skipped. This functionality works correctly in the latest version of Ignite UI Angular.

    The described scenario could be observed here:

     

    Versions Used

    The sample uses the specific versions you mentioned:

    "@angular/animations": "^17.0.0",
    "@angular/cdk": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "igniteui-angular": "^17.0.5"

    Request for Additional Information

    If you are still experiencing issues, please provide additional details to help diagnose the problem:

    1. Custom Code: Have you made any custom modifications to the grid or its related code that might affect this behavior?
    2. Visual Aids: Screenshots or videos demonstrating the issue would be very helpful.
    3. Isolated Sample: If possible, create an isolated sample that reproduces the behavior. Include detailed steps to reproduce the issue.

    This additional information will enable me to better understand the context and potentially identify the root cause of the issue you are experiencing.

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics

Children
No Data