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

How to set focus to first row in radgrid

13 Answers 1109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
muhammad toori
Top achievements
Rank 1
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

Sort by
0
Shinu
Top achievements
Rank 2
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.
0
muhammad toori
Top achievements
Rank 1
answered on 25 Feb 2010, 07:19 PM
Hi
Thanks for  you reply. It works from client side but doesn't work from server side. Server side code just sets focus to an image on the first row but it doesn't activate the row i.e can't use up/down keys to traverse the rows. Can you help there
Thanks!
0
sridhar duggireddy
Top achievements
Rank 1
answered on 26 Feb 2010, 03:14 AM
Hi shinu,

Does this work if the first column is a template column and I need to set the focus to the textbox inside it.
0
muhammad toori
Top achievements
Rank 1
answered on 26 Feb 2010, 11:56 PM
Does anyone know how to set focus to a row in radgrid from server side. The following doesn't work
RadGrid1.MasterTableView.Items[0].Focus();

Thanks
0
Sebastian
Telerik team
answered on 01 Mar 2010, 11:52 AM
Hi muhammad,

You can utilize the keyboard navigation feature of RadGrid to focus the entire control or make a specific row active on the server by setting the ClientSettings -> ActiveRowIndex property. Alternatively, to focus textboxes or other controls in grid rows, follow the approach from this documentation article.

Best regards,
Sebastian
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.
0
muhammad toori
Top achievements
Rank 1
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

0
Pavel
Telerik team
answered on 09 Mar 2010, 04:11 PM
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.
0
muhammad toori
Top achievements
Rank 1
answered on 09 Mar 2010, 11:17 PM
I get the following error message
htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.

Thx
Muhammad

0
Pavel
Telerik team
answered on 10 Mar 2010, 08:25 AM
Hi Muhammad,

Although I cannot reproduce the error with the attached files, can you delete the script in the UserControl and see if the problem persists?

Best wishes,
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.
0
balaji
Top achievements
Rank 1
answered on 11 Feb 2011, 03:40 PM
Hi Muhammad,

I'm exactly facing the same problem as u mentioned (it is invisible, not enabled, or of a type that does not accept the focus.)

i've tried attached sample code.  still causing the problem and one more error if there is no record(i.e zero) there also error popups


regards,

Balaji
0
Bill Swartz
Top achievements
Rank 1
answered on 02 May 2011, 07:47 PM
Need the same functionality. Need to use arrow keys while editing or inserting data in a grid. When i press arrow key getting error like
"htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."
I've set AllowKeyboardNavigation="true" in Grids CLientSettings .



Works Now....
0
Elliott
Top achievements
Rank 2
answered on 02 May 2011, 08:43 PM
I had no problem setting focus to a particular grid but I had a grid where there was always an empty item open for entry
it was templated so I isolated the column I was interested in and set focus to that
0
Bill Swartz
Top achievements
Rank 1
answered on 02 May 2011, 09:56 PM
works now.
Tags
Grid
Asked by
muhammad toori
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
muhammad toori
Top achievements
Rank 1
sridhar duggireddy
Top achievements
Rank 1
Sebastian
Telerik team
Pavel
Telerik team
balaji
Top achievements
Rank 1
Bill Swartz
Top achievements
Rank 1
Elliott
Top achievements
Rank 2
Share this question
or