Prevent grid row expansion on keydown

1 Answer 48 Views
Grid
Jared
Top achievements
Rank 2
Iron
Jared asked on 04 Oct 2024, 07:36 PM

Hi, I've got a grid whose rows expand to show another, templated, grid. I also have clickable links in the cells of the parent grid. Using a mouse, I can click these links directly or click the expansion icon to expand the row. Using keyboard navigation, however, I can only expand the parent row when I press enter. On grids without a templated sub-grid, pressing Enter will focus the link in the parent cell. I would like this behavior to be uniform.

I have tried intercepting the keydown event, but it seems that the expansion occurs even when I try to prevent default or return false as it happens seemingly in parallel.

Is there a way to achieve the functionality I want without resorting to overriding keydown or, if not, is there a way to cancel/control the expansion myself rather than having it automatically happen so that I can handle it in a custom keydown?

Grid example:

On this grid, when I press enter while Dialog Link column cell is selected, it expands the row.

Here in this example is a grid without a templated subgrid. Pressing enter on the same column focuses the "AAA" anchor tag within it, which is the desired behavior in both grids.

My attempt to control the expansion myself via a custom keydown event. The expansion happens before this logic has a chance to finish running:

1 Answer, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 07 Oct 2024, 09:00 PM

Hello Jared,

 

Thank you for writing to us.

You can achieve this requirement by removing this property:

.Navigatable()
And implementing own custom navigation.

Is this suitable for your project? I can implement this for you.

 

Regards,
Eyup
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jared
Top achievements
Rank 2
Iron
commented on 07 Oct 2024, 11:28 PM

Hi, thank you for your response.

I would like to keep the built-in keyboard navigation as it behaves the way we want outside of this one inconsistency. We also use the telerik/kendo Editor and List Box controls, so having similar keyboard navigation between them would be good. Do you know if this inconsistency is a known/fixed bug or if it's intentional?

If there is not a way to keep the built-in keyboard navigation while also correcting this issue, then we can implement our own, I think it will just be more time consuming to do while accounting for all aspects of the grid and possibly not compatible if we update to a newer version. We've already run into issues with class names and property bindings changing in newer versions that have prevented us from updating so we try to avoid custom workarounds when possible.

Eyup
Telerik team
commented on 11 Oct 2024, 03:08 AM

Yes, you are correct - this behavior is intentional and implemented by design. When the Keyboard Navigation of the Grid is enabled, the Enter key press is reserved and it is used for the expand/collapse functionality.

As there is no an easy way to disable this, I have created a Feature Request in our Public Feedback Portal:
https://feedback.telerik.com/kendo-jquery-ui/1667117-provide-option-to-disable-keys-in-built-in-keyboard-navigation

Having a way to disable and ignore specific keyboard navigation keys will be very helpful in multiple scenarios and I want to thank you for this idea.

I have updated your Telerik Points as a token of gratitude.

Jared
Top achievements
Rank 2
Iron
commented on 11 Oct 2024, 02:09 PM

Thank you for clarifying and creating the feature request. For now, we will attempt to implement our own navigation that mimics the current behavior.
Tags
Grid
Asked by
Jared
Top achievements
Rank 2
Iron
Answers by
Eyup
Telerik team
Share this question
or