Enable Keyboard Navigation + Page Up/Down

10 posts, 0 answers
  1. loowool
    loowool avatar
    60 posts
    Member since:
    Sep 2006

    Posted 18 Feb 2009 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Feb 2009 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. loowool
    loowool avatar
    60 posts
    Member since:
    Sep 2006

    Posted 18 Feb 2009 Link to this post

    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.
  5. Nishant
    Nishant avatar
    33 posts
    Member since:
    Jul 2012

    Posted 17 Mar 2013 Link to this post

    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
  6. Martin
    Admin
    Martin avatar
    811 posts

    Posted 18 Mar 2013 Link to this post

    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.
  7. Kadir
    Kadir avatar
    1 posts
    Member since:
    May 2013

    Posted 18 May 2013 Link to this post

    I have same problem too. Nobody could fix this problem?
  8. Nishant
    Nishant avatar
    33 posts
    Member since:
    Jul 2012

    Posted 18 May 2013 Link to this post

    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
  9. Martin
    Admin
    Martin avatar
    811 posts

    Posted 20 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Nishant
    Nishant avatar
    33 posts
    Member since:
    Jul 2012

    Posted 20 May 2013 Link to this post

    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
  11. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 23 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017