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
How to include buttons in 'actions' column to tabs and arrows navigation in igx-grid?
posted

Hi

I have an igx-grid and need to include buttons in a special 'actions'-column into grid's 'tab' and arrows keyboard-interaction.

I want the buttons to be treated in a similar way as columns are in case of a 'read'-mode. I.e. to get focus one by one and pass it to a next column if no more buttons.

And same situation for edit-mode and interactions with tabs.

Please advise from there to start to achieve that?

I'm using the version 11.1.4

see the ui-draft: stackblitz.com/.../github-srbuis-dpvliy

  • 2700
    Offline posted
    Hello Daniel,

     

    Thank you for the provided sample.

     

    I have been looking into your requirement and further extended the custom logic, provided in the solution from the other forum thread that you created to be able to navigate through the buttons in the “Actions” column similar to the default grid navigation. You can find the modified sample here.

     

    Please, note that, as stated in our Grid Keyboard Navigation documentation page here, exposing any focusable element into the IgxGrid body via template may introduce side effects in the keyboard navigation, since the default browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately. This means that such customizations of the grid keyboard navigation are application level scenarios. So, please keep in mind that the suggested solution is a workaround that may not be applicable to all scenarios, since it is not fully tested. Please, feel free to further modify it according to your requirements.

     

    As you can see in the sample, the new logic is introduced again in the activeNodeChange event and the grid’s keyown event. I would like to point out that in order to prevent the default “Tab” behavior over the buttons, the tabindex="-1" has to be set on each one. Additionally, to be able to access them while in edit mode, the same template with the igxCellEditor directive also has to be defined.

     

    Please, test the sample on your side and let me know if I may be of any further assistance.

     

    Sincerely,
    Bozhidara Pachilova
    Associate Software Developer