Click here to Skip to main content
Click here to Skip to main content

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

, 26 Jul 2007 CPOL
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.

Introduction

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.

Background

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 = 
  (DropDownList)gvPunchList.Rows[e.NewEditIndex].FindControl("dlCategory");

//////////////////////////////////////////////////////////////////////
// TAB KEYPRESS ON LAST CONTROL TO AUTO SAVE AND EDIT NEXT RECORD:
//////////////////////////////////////////////////////////////////////
// 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$" + 
              e.NewEditIndex.ToString());

// 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;
}
else
{
    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());
//////////////////////////////////////////////////////////////////////////
// END TAB KEYPRESS AUTOSAVE/EDIT
/////////////////////////////////////////////////////////////////////////

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!

History

  • 07/26/07 - Initial implementation.

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralObject reference not set to an instance of an object. PinmemberGeoMarketing1-Apr-10 6:27 
GeneralHelp!! PinmemberMember 9876697-Apr-09 6:29 
I also got the same error like the other guy
Object need an instance..
quick quetion? what did you use? VS2008 or VS2005.
 
I have VS 2005.
Generalsomething missing. Pinmemberjeff kennedy20-Feb-08 5:49 
GeneralA cry for help Pinmemberfitz29718-Dec-07 4:21 
GeneralTextBox Field PinmemberTarus Latacki31-Jul-07 5:23 
GeneralRe: TextBox Field Pinmembernpaterson31-Jul-07 6:23 
GeneralRe: TextBox Field PinmemberTarus Latacki31-Jul-07 6:33 
GeneralRe: TextBox Field Pinmembernpaterson31-Jul-07 8:38 
GeneralRe: TextBox Field PinmemberTarus Latacki31-Jul-07 8:51 
GeneralRe: TextBox Field Pinmembernpaterson31-Jul-07 17:07 
GeneralRe: TextBox Field PinmemberTarus Latacki1-Aug-07 5:55 
GeneralTAB keycode PinmemberRoberto_Rwk26-Jul-07 20:52 
GeneralRe: TAB keycode Pinmembernpaterson28-Jul-07 9:30 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 27 Jul 2007
Article Copyright 2007 by npaterson
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid