Keyboard Nav after Mouse Select

3 posts, 1 answers
  1. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 18 May 2012 Link to this post

    When reviewing the "Keyboard Support" demo for the treelist I noticed that the selection made using the keyboard doesn't follow later selections made by the mouse.

    To test this:
    1. Navigate to the demo and select a row (item) with your MOUSE. 
    2. Arrow up or down to a different row with the KEYBOARD.
    3. With this new selection made, use your MOUSE to select a different row.
    4. Navigate up or down using your KEYBOARD.

    What I would expect is that final keyboard nav would start from my latest mouse click however my mouse click is ignored and, Instead, the keyboard nav picks up from the last row navigated to via the keyboard (where it left off).

    It would appear that the selection made by the mouse and keyboard are independent of one another? How should I keep these two methods of selection in sync so that the keyboard follows the latest selection (regardless of what created the selection)?

  2. Answer
    Marin avatar
    1038 posts

    Posted 23 May 2012 Link to this post


     This behavior is designed to mimic the selection and navigation in windows explorer. The keyboard navigation is applied only to the current active row (a row that can be changed only through keyboard operations). Selecting a row with the mouse does not change the current active row of the keyboard navigation - that's why it remembers where it left off - and applies the keyboard operations to this row. Generally speaking operations with the mouse should not affect properties of the keyboard navigation.
    Still you can achieve the desired behavior by handling the ItemClick event of the TreeList and changing the active row there:

    <ClientSettings AllowKeyboardNavigation="true">
                    <Selecting AllowItemSelection="true" />
                    <ClientEvents OnItemClick="rowClick" />
    function rowClick(grid, args)
                        var rowElement = args.get_item().get_element();
                        //calling internal function to change the current active row

    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.
  3. DevCraft R3 2016 release webinar banner
  4. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 23 May 2012 Link to this post

    Thank you. This got me close, I just needed to add a call to 'deselectAllItems" prior to setting the active row and everything worked as expected. If I didn't "deselect all" I'd end up with multiple selections in the treelist. Thanks again! :) 
Back to Top