This is a migrated thread and some comments may be shown as answers.

How to set focus to first row in radgrid

13 Answers 1319 Views

Grid

This is a migrated thread and some comments may be shown as answers.

muhammad toori asked on 18 Feb 2010, 01:41 AM

Hi

I would like to set focus to the first row in the radgrid when the page loads so that users can use arrow keys to move up and down as soon as the radgrid loads. I tried the code below on ClientEvent OnGridCreated="setFirstRowActive"

function

setFirstRowActive() {

var grid = $find("<%= grdCodeLists.ClientID %>");

var masterTable = grid.get_masterTableView();

var row;

//set first row as active

grid.set_activeRow(masterTable.get_dataItems()[0].get_element());

}

This only highlights the row but doesn't activiate it i.e. can't use up/down arrow to go up/down the rows. Instead of set_activeRow() i tried using SelectItem as well as set_selected properties but they produce the same results
How can this be achieved from both client and server side

13 Answers, 1 is accepted

answered on 18 Feb 2010, 05:34 AM

Hello Muhammad,

Here is the client side code for focusing to the first row of grid when page loads.

Client Side:

    
            <script type="text/javascript"> 
        
                function GridCreated(sender, args) { 
        
                    sender.set_activeRow(sender.get_masterTableView().get_dataItems()[0].get_element()); 
        
                    sender.get_masterTableView().get_dataItems()[0].get_element().cells[0].focus(); 
        
                }  
        
            </script>

Also you can try the following code snippet from server side.
C#:

    
                protected void RadGrid1_PreRender(object sender, EventArgs e) 
        
                { 
        
                    RadGrid1.MasterTableView.Items[0].Focus(); 
        
                }

Note: Also make sure that you set the property AllowKeyboardNavigation to "true".
<ClientSettings AllowKeyboardNavigation="true">

Hope this helps,
Shinu.

answered on 02 Mar 2010, 11:26 PM

Hi Sebastian
With ClientSettings -> ActiveRowIndex property the first row becomes highlighted but the Up/Down Arrow keys do not work. What I want is for users to be able to start navigating the rows (up/down) as soon as the grid loads i.e up/down arrow keys respond to user action.
Another approach I've tried is to set focus to first row from javascript on OnGridCreated() event using the code below

sender.get_masterTableView().get_dataItems()[0].get_element().cells[1].focus();

I use RadTabStrip and Multi page controls. I have mulitple tabs on an aspx page. Each tab has a user control on it and some of the tabs have a grid on it and some don't. With the above code focus gets set to the first row and the Up/Down arrow keys become active as long as I don't navigate to a tab that does not have a grid on it. If I go to a tab with no grid and then come back to a tab with a grid on it the above code fails to set focus i.e. Up/Down arrow keys don't resopond unless we use the keyboard shortcut defined in ClientSettings to set focus.
Also there seems to be no way to make a row active from server side code (i.e. the row is highlighted and the Up/Down arrow keys also work to traverse the rows in the grid).
Any help with be greatly appreciated

Thanks
Muhammad

answered on 09 Mar 2010, 04:11 PM

sample.zip

Hi Muhammad,

In order for such a scenario to work, you need to focus the Grid's cell when it becomes visible, which which in this case happens when the selected tab is changed. I have prepared a simple example which illustrates one way to achieve this.

Greetings,
Pavel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.