Click here to Skip to main content
13,552,932 members
Click here to Skip to main content
Add your own
alternative version


27 bookmarked
Posted 26 Jul 2007
Licenced CPOL

Auto-update GridView row and place the next row in Edit mode by pressing Tab

, 26 Jul 2007
Rate this:
Please Sign up or sign in to vote.
Easily add necessary code to a control's keypress event to trap the TAB key, fire the GridView row's Update method, and place the next row in Edit mode.


For a GridView that utilizes template columns, when a row is placed in edit mode and the last cell's control is selected, when the user presses the TAB key, it automatically updates that row's changes, then places the next row in Edit mode.


The customer requirement was that while editing a GridView row, when TAB is pressed on the last cell, save the changes to that row and place the next row in edit mode. This allows them to quickly do mass updates without having to stop to use the mouse to click the Update and Edit buttons on particular rows.

When I first started coding this, I thought I could simply generate the cryptic object names (e.g., gvPunchList$ctl103$ctl100) that the ASP.NET GridView generates, until I realized that these names change, depending on the postback and event. I drove myself crazy trying to figure out how the GridView/ASP.NET does this, until I found the above methods. No need to understand the inner workings of the GridView now.

Using the Code

The following code was added to the GridView's RowEditing event:

//This is the control found in the last cell of the GridView template:

DropDownList dlc = 

// This Code Block wires up the category drop down list so that
// if the user preses TAB while on that control, the edit record
// will be saved, and the next record will be brought into edit mode:

PostBackOptions myPostBackOptions = new PostBackOptions(this);
myPostBackOptions.AutoPostBack = false;
myPostBackOptions.RequiresJavaScriptProtocol = true;
myPostBackOptions.PerformValidation = true;

//This gets the required javascript code that fires 
//when the UPDATE link button is clicked:
String evt = Page.ClientScript.GetPostBackClientHyperlink(
              sender as GridView, "Update$" + 

// iNewNavigate is used to determine the target row.
// if we are at the end of the GridView rows we will 
// go back to the first row and place it in edit mode:
int iNewNavigate = 0;
if (gvPunchList.Rows.Count - 1 != e.NewEditIndex)
    iNewNavigate = e.NewEditIndex + 1;
    iNewNavigate = 0;

// Get the javascript that is used to place a gridview row
// into edit mode and specify the next row //as the target:
string evt2 = Page.ClientScript.GetPostBackClientHyperlink(
                sender as GridView, "Edit$" + iNewNavigate.ToString());

// Add to the control onkeydown javascript event code
// to check if the TAB key has been pressed
// If it was, and fire off the events to execute
// the intrinsic Update event, and place the next row
// into Edit mode:

StringBuilder js = new StringBuilder();
js.Append(@"if(event.which || event.keyCode)");
js.Append(@"{if ((event.which == 9) || (event.keyCode == 9)) ");
js.Append("{" + evt + ";" + evt2 + ";return false;}} else {return true}");

// Add this javascript event to the last control in the GridView Row:
dlc.Attributes.Add("onkeydown", js.ToString());

The comments in the above code block should explain what's going on. Basically, we automatically build the necessary postback methods for the control found in the last cell of a GridView row, and fire that postback method(s) when that control has focus, and the TAB key is pressed. The TAB key is detected with the JavaScript keyCode method.

GetPostBackClientHyperlink is used to provide us a string containing the necessary JavaScript statements required to fire the UPDATE or EDIT events of the GridView CommandField (Edit or Update, could also be SELECT).

After we create our JavaScript key trap and the client-side postback methods, we just bind that to the control in the last GridView row cell's onkeydown event.

Points of Interest

Don't try to decipher the generated client code the GridView creates, and especially don't try to programmatically recreate the unique <TD> names it creates!


  • 07/26/07 - Initial implementation.


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


About the Author

Web Developer
United States United States
I.T. Consultant for 16 years, currently programming in .Net 2.0 and SQL Server 2005/Oracle

You may also be interested in...

Comments and Discussions

GeneralObject reference not set to an instance of an object. Pin
GeoMarketing1-Apr-10 6:27
memberGeoMarketing1-Apr-10 6:27 
GeneralHelp!! Pin
Member 9876697-Apr-09 6:29
memberMember 9876697-Apr-09 6:29 
Generalsomething missing. Pin
jeff kennedy20-Feb-08 5:49
memberjeff kennedy20-Feb-08 5:49 
GeneralA cry for help Pin
fitz29718-Dec-07 4:21
memberfitz29718-Dec-07 4:21 
GeneralTextBox Field Pin
Tarus Latacki31-Jul-07 5:23
memberTarus Latacki31-Jul-07 5:23 
GeneralRe: TextBox Field Pin
npaterson31-Jul-07 6:23
membernpaterson31-Jul-07 6:23 
GeneralRe: TextBox Field Pin
Tarus Latacki31-Jul-07 6:33
memberTarus Latacki31-Jul-07 6:33 
GeneralRe: TextBox Field Pin
npaterson31-Jul-07 8:38
membernpaterson31-Jul-07 8:38 
GeneralRe: TextBox Field Pin
Tarus Latacki31-Jul-07 8:51
memberTarus Latacki31-Jul-07 8:51 
GeneralRe: TextBox Field Pin
npaterson31-Jul-07 17:07
membernpaterson31-Jul-07 17:07 
GeneralRe: TextBox Field Pin
Tarus Latacki1-Aug-07 5:55
memberTarus Latacki1-Aug-07 5:55 
GeneralTAB keycode Pin
Roberto_Rwk26-Jul-07 20:52
memberRoberto_Rwk26-Jul-07 20:52 
GeneralRe: TAB keycode Pin
npaterson28-Jul-07 9:30
membernpaterson28-Jul-07 9: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 | Terms of Use | Mobile
Web03-2016 | 2.8.180515.1 | Last Updated 27 Jul 2007
Article Copyright 2007 by npaterson
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid