Unable to select a row using the Space bar

[Tarun]

Hi Telerik,

I have used RadGrid on my page with AllowKeyboardNavigation set to true and also ClientSettings->Selecting -> AllowRowSelect set to true. Also, EnablePostBackOnRowClick is set to true.

I am able to navigate using the arrow keys and i could see the row gets highlighted when i move the up/down keys.
But when i use the Space bar to select any row, nothing happens.

But, i wish to select the row (the way it happens when i use the mouse to click on any row).
The selection seems different in two cases, with the mouse click and keyboard arrow keys.

Kindly suggest what is the difference and also how to use the space bar to make the selection in the RadGrid.

Regards
Tarun Singla

[Marin]

Hello Tarun,

 There are two different styles - one for the active row and another one for the selected row. The one for the active row overlaps the other - that's why you do not see any visible change when you select / deselect the row with the space key. If you define a different style with greater specificity for the selected row you will see it above the active row, e.g.

div.RadGrid_Vista .rgSelectedRow
{
      background:red;
}

When you navigate, both the active and selected row move together. So the current selected row is also changed with the up / down arrow keys. If you need to navigate only the active row you can hold the Ctrl key while navigating - this is done to resemble the windows experience.
Now about the postback on selection - it will not be triggered when selecting with space because the keyboard selection is performed in a different way. If you do need a postback when the space is pressed you can handle the keyPress client-side event of the grid and manually fire from there a select command which will perform a postback. You can use the fireCommand method for this purpose.All the best,
Marin
the Telerik team

[Constantin]

Sorry for bumping this old thread, but I'm struggling with the same problem and I am unable to properly fire a select command in the keypress handler, because I'm unable to get the index of the selected row.
By the time the keypress event is fired, the row isn't selected yet and the client API doesn't list a way to get the active item and get the index from that.

[Marin]

Hi,

 You can access the current active row in the following way:

<telerik:RadCodeBlock runat="server">
                <script>
                    function gridKeyPress(sedner, args)
                    {
                        var activeRow = $find('<%= RadGrid1.ClientID %>')._activeRow;
                        var dataItem = $find(activeRow.id);
                    }
                </script>
            </telerik:RadCodeBlock>

Note that in the grid's keyPress event you can access the active row before the current keyboard action is preformed. So if for example the keyboard action changes the active row (such as the up / down arrow keys) the active row will have the old value before the change. You can determine the new active row by checking the value of args.get_keyCode() to see if it is up or down arrow key and calculate the new index appropriately.Regards,
Marin
Telerik

[Ian]

Hi, OK, this is tiresome but getting there. when I press the space bar I can show that this has been pressed and get the dataItem in a javascript function, but how do I run the firecommand for a row 'Select' click equivalent? I cannot see a Select command (with suitable params) in the URL below - am I missing something?

http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html

Any help very much appreciated.

Regards, Ian

[Constantin]

It's not documented on the page you linked but this works for us and has been mentioned in a couple of threads in the forum.

grid.get_masterTableView().fireCommand("Select", dataItem.get_itemIndexHierarchical());

[Marin]

Hi,

 Yes, the below suggestion will properly fire the "Select" command in this case, you should make sure that the second parameter is the correct index of the item on the current page, while the get_itemIndexHierarchical() method might return a more complex value in the case of hierarchy.

Regards,
Marin
Telerik

[Ian]

Thanks very much for your responses there - this is now working for me.

Out of interest, this select fire command is 'not documented on the page' - why not? It really ought to be as this is likely to be the first thing that a developer would want to do with keyboard-handling the grid.

Thanks.

[Ian]

Blimey - I just found a big problem with this! Adding the KeyboardNavigationSettings section to the ClientSettings radgrid definition has made the grid lose the scroll position when I select a row that is after the first page down the list. I don't use scrolling - I just have a long, scrollable list of data items in the grid, and the user can select a row - full row select - and then see the details in another part of the screen to deal with the record, then select the next one etc. Normally however far down the list the selected row is, it remains on screen and selected.

Now after adding the KeyboardNavigationSettings section, when a 'down the list' row is selected the grid repositions itself to the top again. the  selected record is still highlighted but you have to scroll down to be able to see it. Why on earth is that happening? And more importantly, how do I stop it?

My settings are:

<KeyboardNavigationSettings FocusKey="Y" EnableKeyboardShortcuts="false" AllowActiveRowCycle="false" />
<ClientEvents OnKeyPress="RadGrid1_OnKeyPress" />

As soon as I remove these lines, the grid behaves itself properly again - i.e. does not reposition itself to the top of the list. I added a SaveScrollPosition="true" element to the scrolling declaration but this had no effect.


Many thanks if you can help!

With regards, Ian

[Princy]

Hi Ian,

I tried to replicate the issue,but no avail.Here is a simple code snippet that I tried,please try.If it doesn't help can you provide your full code so as to find the issue.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" >
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
        </Columns>
    </MasterTableView>
    <ClientSettings  Scrolling-SaveScrollPosition="true"
        AllowKeyboardNavigation="true" Selecting-AllowRowSelect="true">
        <KeyboardNavigationSettings FocusKey="Y" EnableKeyboardShortcuts="false" AllowActiveRowCycle="false" />
    </ClientSettings>
</telerik:RadGrid>

Thanks,
Princy