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
Dan Ko
35
Skipping of non-editable based on rowData cells during tabbing
posted

In my grid there are non-editable cells in editable columns(depending on rowData).
I need to skip them during tabbing.

Here is almost working solution:(stachblitz)

found here


The issue is if the editable depending on rowData column is the first or the last
then it is not skipped properly if we are being moved row up or down.

It comes from the fact that callback in getNextCell method takes the column, but not the data-cell.


So is there any way to get the rowData in the callback?((column: IgxColumnComponent) => boolean)?

here is another solution
but when there is a horizontal scrollbar in the grid it might get broken.

Thank you!

  • 35
    Offline posted in reply to Bozhidara Pachilova

    Hi Bozhidara,

    Thank you for the solution. In general it works though there are some issues when editable cells are not in each and every row.

    Best regards,

    Dan

  • 2680
    Verified Answer
    Offline posted
    Hello,

     

    Thank you for the provided sample.

     

    Could you please confirm that I have correctly understood the issue you are facing: if the non-editable cell (based on its data) is either in the first or the last column in the grid, it is not properly skipped, when it should.

     

    Additionally, from the isEditable method code, I believe the condition for a cell to be skipped is that the cell’s value is equal to “London”, however, could you please elaborate on what are the exact requirements for an otherwise editable cell to be skipped?

     

    Based on these understandings I modified your sample by placing the “City” column on both the first and last column positions.

     

    By doing this I think I was able to reproduce the issue - my guess is that the reason for this behavior is we are referring to the current row’s data, when retrieving the editable cell condition in the isEditable callback. In the case when the column’s index is 0 and we are pressing “Shift”+”Tab” we are successfully navigating to the “London” cell in the last column in the row above, because the current row’s “City” data is not equal to “London” and our condition passes for the next cell, even when it shouldn’t. The same goes for when we are at the last column pressing “Tab” and we successfully navigate to the next row’s “London” first cell.

     

    So, in order to fix this, we need to know when we are currently on a column with index 0 (when pressing “Shift”) or, alternatively with index equal to the number of columns - 1 and retrieve the data for the previous/next row.
    You can find the sample with the introduced modification here. Please, test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you're trying to achieve, please feel free to provide additional details regarding the issue.

     

    Lastly, I would like to mention that since this can be considered a custom application-level solution regarding the IgxGrid Keyboard Navigation, it is possible that not all scenarios are covered, as this solution is not fully tested.

     

    Thank you for your cooperation.

     

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer