Enable Keyboard Navigation + Page Up/Down

[loowool]

Dear Telerik,

When we enable the keyboard navigation feature on a grid "radGrid.ClientSettings.AllowKeyboardNavigation = true;" the Page Up/Page Down/ End/ and Home keys get disabled.

What are we doing wrong? How do we enable them? We'd like them to move the active row as the Up/Down arrows do. Can you help?

Salah A. Malaeb
TeknoBuild

[Shinu]

Hi,

I tried implementing Keyboard navigation in RadGrid . Page Up/Page Down/ End/ and Home keys are working as expected on my end. Which version of the RadGrid you are using?
I am using:
RadGrid(2008.03.1314.20)
IE(6)
Firefox(3.0.6)

Thanks
Shinu

[loowool]

Thanks for your reply. I'm using "RadControls for ASPNET AJAX Q3 2008" on "IE7".

I discovered that even though the Up/Down arrows work fine when keyboard navigation is set to true, the PageUp/PageDown/End/Home do not work unless you click on the grid to enable it or set focus on it.

But even that does not solve my problem, as the active row remains the same after a PageUp/PageDown/End/Home, and the grid area scrolls but the active row does not move.

I'm trying to move the active row not only on Up/Down arrows, but also on PageUp/PageDown/End/Home keys.

One more issue that I have with keyboard navigation: In a grid with 100 rows in a single page showing only the first 20 rows, where you have to scroll to see the rest. I have a context menu on this grid that shows when someone clicks the right mouse button over any row. If the right mouse button is clicked on a row, I activate that row then show the context menu. To do that, I hooked to the "GridContextMenuShowing" client event, and asked it to run the function grid.set_activeRow(row.get_element());

The problem with this function is that it does a scroll into view of the active row placing it at the bottom of the scroll area even if the active row was already visible in the middle of the scroll area and not at the bottom.

This problem does not show if the clicked row is one of the first 20 rows. It shows if I scrolled down with the page down/or vertical scroll bar to any row after the 20th keeping the active row somewhere between 1 and 20.

Please let me know how to disable this annoying auto scroll.

[Nishant]

Hi,

I'm facing the same problem. When AllowKeyBoardNavigation is set to True, PageUp/Down, Home/End Keys do not work. Here is my Grid :

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" DataSourceID="XmlDataSource1"
    Height="200px" GridLines="None" AutoGenerateEditColumn="True">
    <ClientSettings AllowKeyboardNavigation="True">
        <KeyboardNavigationSettings EnableKeyboardShortcuts="true" AllowActiveRowCycle="true" />
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="True" DataSourceID="XmlDataSource1">
    </MasterTableView>
</telerik:RadGrid>

I'm using the latest version of Telerik ASP.NET Ajax controls (Q1 2013) and tried on IE 9 & FireFox 19. Please help me resolve this issue.

Thanks,
Nishant

[Martin]

Hello Nishant,

I have logged a feedback issue based on your report. You can follow its status here.

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kadir]

I have same problem too. Nobody could fix this problem?

[Nishant]

Hi Martin,

When i click the link you've provided to track the status of my bug report, it shows the status as rejected !!

Nishant

[Martin]

Hello Nishant,

I have updated the link and now it inlcudes the reason of the rejected status. Here I am pasting it again:

"Rejected Reason: The reason for the keys not to work is the tabIndex of the RadGrid element which is set to zero which is used for the KeyboardNavigation and if removed will break other functionalities.

However, the desired functionality could be achieved by subscribing to RadGrid OnGridCreated client-side event and removing the tabIndex attribute as shown below.
function GridCreated(sender, args)
{
sender.get_element().removeAttribute("tabIndex");
}"

Kind regards,
Martin
the Telerik team

[Nishant]

Hi Martin,

I added the tabindex proptery in the RadGrid declaration and it is still not working. I also tried adding 'sender.get_element().removeAttribute("tabIndex");'   in the OnGridCreated event, but nothing changed.

However, earlier, without TabIndex, none of the PgUp, PgDn, Home, End keys were working. Now, with the addition of TabIndex, the PgUp/PgDown keys have started responding, but in a weird way.

PgDn takes me to the previous page and PgUp takes me to the Next Page (which seems to be the opposite of their expected behaviour), and these keys work only if I click on the RadGrid using my mouse. Means, i can not do PgUp twice in succession without clicking on the grid.

Also, Home and End keys do not work at all.

I'm using the latest version of Telerik ASP.NET Ajax (2013.1.417.40) with IE9.

Regards,
Nishant

[Antonio Stoilkov]

Hi Nishant,

The provided solution works when you have KeyboardNavigation disabled. However, if you want to achieve your scenario using KeyboardNavigation you could use the code provided below. Note that you should place the JavaScript after the ScriptManager on the page.

<telerik:RadScriptManager runat="server">
</telerik:RadScriptManager>
<script>
    var original = Telerik.Web.UI.RadGrid.prototype._onKeyDownHandler;
    Telerik.Web.UI.RadGrid.prototype._onKeyDownHandler = function (e)
    {
        var keyCode = e.keyCode || e.charCode,
            scrollableContainer = $get(this.get_id() + "_GridData");
        switch (keyCode)
        {
            // PageUp
            case 33:
                scrollableContainer.scrollTop -= scrollableContainer.offsetHeight;
                break;
            // PageDown
            case 34:
                scrollableContainer.scrollTop += scrollableContainer.offsetHeight;
                break;
            //Home
            case 36:
                scrollableContainer.scrollTop = 0;
                break;
            // End
            case 35:
                scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
                break;
        }
        if (keyCode !== 33 && keyCode !== 34 && keyCode !== 35 && keyCode !== 36)
        {
            original.call(this, e);
        }

    }
</script>

Regards,
Antonio Stoilkov
Telerik