How to set focus to first row in radgrid

14 posts, 0 answers
  1. muhammad toori
    muhammad toori avatar
    12 posts
    Member since:
    Jan 2010

    Posted 17 Feb 2010 Link to this post

    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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Feb 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. muhammad toori
    muhammad toori avatar
    12 posts
    Member since:
    Jan 2010

    Posted 25 Feb 2010 Link to this post

    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!
  5. sridhar duggireddy
    sridhar duggireddy avatar
    2 posts
    Member since:
    Feb 2010

    Posted 25 Feb 2010 Link to this post

    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.
  6. muhammad toori
    muhammad toori avatar
    12 posts
    Member since:
    Jan 2010

    Posted 26 Feb 2010 Link to this post

    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
  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Mar 2010 Link to this post

    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.
  8. muhammad toori
    muhammad toori avatar
    12 posts
    Member since:
    Jan 2010

    Posted 02 Mar 2010 Link to this post

    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

  9. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 09 Mar 2010 Link to this post

    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.
  10. muhammad toori
    muhammad toori avatar
    12 posts
    Member since:
    Jan 2010

    Posted 09 Mar 2010 Link to this post

    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

  11. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 10 Mar 2010 Link to this post

    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.
  12. balaji
    balaji avatar
    17 posts
    Member since:
    Dec 2010

    Posted 11 Feb 2011 Link to this post

    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
  13. Bill Swartz
    Bill Swartz avatar
    8 posts
    Member since:
    May 2010

    Posted 02 May 2011 Link to this post

    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....
  14. Elliott
    Elliott avatar
    391 posts
    Member since:
    May 2010

    Posted 02 May 2011 Link to this post

    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
  15. Bill Swartz
    Bill Swartz avatar
    8 posts
    Member since:
    May 2010

    Posted 02 May 2011 Link to this post

    works now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017