Click here to Skip to main content
14,209,124 members
Click here to Skip to main content
Posted 28 Apr 2008


79 bookmarked

GridView Rows Navigation Using Arrow (Up/Down) Keys

Rate this:
4.87 (38 votes)
Please Sign up or sign in to vote.
4.87 (38 votes)
16 May 2008     CPOL    
This article describes how to navigate GridView rows with the help of arrow (up/down) keys using JavaScript.



Implementing GridView rows navigation using arrow (up/down) keys is an easy task in IE but a little tricky in other web browsers. Initially, when I wrote the JavaScript code for it, the script was working well in IE but not in other browsers. After doing lots of R&D on the Internet, I learned some tricks from the Mozilla Development Center web site [^] in order to run this script on other web browsers.

Using this script, you can navigate GridView rows with the help of the arrow (up/down) keys, but before navigating, you have to select a row using the mouse onclick event.


Below is the HTML code for the GridView for this demo:

<asp:GridView ID="gridView" runat="server" AutoGenerateColumns="False" 


              TabIndex="0" GridLines="Horizontal">
      <asp:BoundField HeaderText="S#" DataField="sno">
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
      <asp:BoundField HeaderText="Random No" DataField="rndno">
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
      <asp:BoundField HeaderText="Date" DataField="date">
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
      <asp:BoundField HeaderText="Time" DataField="time">
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
   <RowStyle BackColor="#FFE0C0" />
   <HeaderStyle BackColor="#FF8000" Font-Bold="True" ForeColor="White" />
   <AlternatingRowStyle BackColor="#FFC080" />

In this demo, the GridView works like a component with the TabIndex equal to 0.

C# Code

Below is the C# code of the RowCreated event of the GridView:

if (e.Row.RowType == DataControlRowType.DataRow &&
   (e.Row.RowState == DataControlRowState.Normal ||
    e.Row.RowState == DataControlRowState.Alternate))
    e.Row.TabIndex = -1;
    e.Row.Attributes["onclick"] =
      string.Format("javascript:SelectRow(this, {0});", e.Row.RowIndex);
    e.Row.Attributes["onkeydown"] = "javascript:return SelectSibling(event);";
    e.Row.Attributes["onselectstart"] = "javascript:return false;";

In the above code, first, it has been ensured that the row is either Normal or Alternate. After that, the client-side events onclick, onkeydown, and onselectstart are attached on each of the rows of the GirdView. Also, note that each row of the GirdView has been set to have a TabIndex equal to -1 in order to set the focus on it programmatically. Actually, in this example, the GridView works like a component with TabIndex = 0, and each row of the GridView behaves like an element of the component with TabIndex = -1. Navigation to each element in the component is done via the arrow keys. A row receives focus when the user navigates to it using the arrow (up/down) keys. Arrow key support is achieved by associating the onkeydown event on each of the rows of the GridView.

When trapping key events, it is important to prevent the browser from executing the default behavior of the keystroke. The common browser action resulting from a down/up arrow press is to scroll the document. If you wishes to trap the arrow keys and use them to change focus to a different GridView row, the default scrolling behavior needs to be prevented. This is done by setting the return value equal to false of the event. Please note how the onkeydown event has been attached on the row.

The onclick event is used here to select a row using the mouse. Before navigating a GridView’s rows using the arrow (up/down) keys, we have to select a row using the mouse onclick event.

The onselectstart event is used here to prevent cell text highlighting when selecting GridView rows using the mouse.

JavaScript Code

<script type="text/javascript">
    var SelectedRow = null;
    var SelectedRowIndex = null;
    var UpperBound = null;
    var LowerBound = null;
    window.onload = function()
        UpperBound = parseInt('<%= this.gridView.Rows.Count %>') - 1;
        LowerBound = 0;
        SelectedRowIndex = -1;        
    function SelectRow(CurrentRow, RowIndex)
        if(SelectedRow == CurrentRow || RowIndex > UpperBound || RowIndex < LowerBound)
        if(SelectedRow != null)
   = SelectedRow.originalBackgroundColor;
   = SelectedRow.originalForeColor;
        if(CurrentRow != null)
            CurrentRow.originalBackgroundColor =;
            CurrentRow.originalForeColor =;
   = '#DCFC5C';
   = 'Black';
        SelectedRow = CurrentRow;
        SelectedRowIndex = RowIndex;
    function SelectSibling(e)
        var e = e ? e : window.event;
        var KeyCode = e.which ? e.which : e.keyCode;
        if(KeyCode == 40)
            SelectRow(SelectedRow.nextSibling, SelectedRowIndex + 1);
        else if(KeyCode == 38)
            SelectRow(SelectedRow.previousSibling, SelectedRowIndex - 1);
        return false;

In the above script, the global variables have been initialized in the window.onload event. There are two functions: SelectRow and SelectSibling. SelectRow is invoked when we click on a GridView row, or via the SelectSibling method in response to keydown or keyup events. The SelectSibling method is invoked when we press the up or down arrow key. This method invokes the SelectRow method with appropriate arguments. In the SelectRow function, if the current row is the previous selected row or RowIndex is not in between LowerBound and UpperBound, it doesn’t do any action; otherwise, it restores the previous selected row’s state and changes the state of the current selected row. After that, the values of the variables SelectedRow and SelectedRowIndex are changed accordingly and the focus on the currently selected row is set using the setTimeout method. The timeout is necessary in both IE and Mozilla, to prevent scripts from doing strange unexpected things as the user clicks on buttons and other controls.


I have tried my best to make this code error free. Suggestions and criticism for further improvements of this code are most welcome.

Browser Compatibility

I have tested this code on various browsers and it worked fine. The list of browsers along with versions is given below:


This code will not work currently on Opera (earlier version of 9.27), Safari, Firebox (as of 1.0), and older versions of Mozilla (1.7 and earlier) as some browsers don’t support the new capabilities like the TabIndex property on all elements.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.


Comments and Discussions

QuestionSelect First Row of gridview by default Pin
Member 1288802124-Jan-18 21:14
memberMember 1288802124-Jan-18 21:14 
GeneralGreat Work, Thanks. Just a note on how to prevent navigation outside table limit (if someone is facing this same problem) Pin
larruda4326-May-17 2:53
memberlarruda4326-May-17 2:53 
QuestionNavigating through the grid on tab key press Pin
Member 121085842-Nov-15 18:30
memberMember 121085842-Nov-15 18:30 
GeneralMy vote of 5 Pin
ankushmaurya18-Nov-12 2:12
memberankushmaurya18-Nov-12 2:12 
QuestionHow to poulate by selecting a row Pin
itsjp15-Oct-12 16:46
memberitsjp15-Oct-12 16:46 
Questionhow to select ur gridview first row without clicking the row Pin
Faiz_Khan20-Aug-12 23:14
memberFaiz_Khan20-Aug-12 23:14 
GeneralMy vote of 5 Pin
Member 15194409-May-12 8:58
memberMember 15194409-May-12 8:58 
GeneralMy vote of 5 Pin
Member 817912125-Jan-12 21:38
memberMember 817912125-Jan-12 21:38 
Generalquestion Pin
alejandro Argudo29-Oct-10 5:22
memberalejandro Argudo29-Oct-10 5:22 
GeneralIssue with post back Pin
asdf99921-Apr-10 3:52
memberasdf99921-Apr-10 3:52 
GeneralI get an error Error- System.EventArgs' does not contain a definition for 'Row' Pin
dsedor28-Oct-09 3:28
memberdsedor28-Oct-09 3:28 
GeneralArrow keys not working in Firefox 3.0.7 version Pin
soft.sri8118-Aug-09 22:49
membersoft.sri8118-Aug-09 22:49 
GeneralGrid View with a stop timer Pin
Mahmudul Hasan noman6-Oct-08 23:00
memberMahmudul Hasan noman6-Oct-08 23:00 
Questionhow select first row when load grid with out click Pin
Member 8044653-Sep-08 20:17
memberMember 8044653-Sep-08 20:17 
QuestionRe: how select first row when load grid with out click Pin
alexvw6-Mar-18 3:56
memberalexvw6-Mar-18 3:56 
GeneralIts not working with ajaxcontrol kit controls Pin
Srinath Gopinath25-Jun-08 1:46
memberSrinath Gopinath25-Jun-08 1:46 
GeneralIn UpdatePanel Pin
sgt13echo6-Jun-08 8:45
membersgt13echo6-Jun-08 8:45 
GeneralRe: In UpdatePanel Pin
Samir NIGAM6-Jun-08 19:22
memberSamir NIGAM6-Jun-08 19:22 
GeneralGreat work Pin
Viral Upadhyay8-May-08 23:29
memberViral Upadhyay8-May-08 23:29 
GeneralRe: Great work Pin
Samir NIGAM9-May-08 0:11
memberSamir NIGAM9-May-08 0:11 
GeneralSafari Issue Pin
I Never Look Behind2-May-08 3:42
memberI Never Look Behind2-May-08 3:42 
GeneralRe: Safari Issue Pin
Samir NIGAM2-May-08 3:46
memberSamir NIGAM2-May-08 3:46 
GeneralGreat work with Grid... Pin
Srinath Gopinath1-May-08 3:59
memberSrinath Gopinath1-May-08 3:59 
GeneralRe: Great work with Grid... Pin
Samir NIGAM1-May-08 19:10
memberSamir NIGAM1-May-08 19:10 
GeneralGood work Pin
Abhijit Jana29-Apr-08 19:30
mentorAbhijit Jana29-Apr-08 19:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190617.3 | Last Updated 17 May 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid