Click here to Skip to main content
15,861,125 members
Articles / Web Development / ASP.NET

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

Rate me:
Please Sign up or sign in to vote.
2.67/5 (2 votes)
26 Jul 2007CPOL2 min read 78.4K   1K   28   13
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:

C#
//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)


Written By
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. Pin
GeoMarketing1-Apr-10 6:27
GeoMarketing1-Apr-10 6:27 
GeneralHelp!! Pin
Member 9876697-Apr-09 6:29
Member 9876697-Apr-09 6:29 
Generalsomething missing. Pin
jeff kennedy20-Feb-08 5:49
jeff kennedy20-Feb-08 5:49 
GeneralA cry for help Pin
fitz29718-Dec-07 4:21
fitz29718-Dec-07 4:21 
GeneralTextBox Field Pin
Tarus Latacki31-Jul-07 5:23
Tarus Latacki31-Jul-07 5:23 
GeneralRe: TextBox Field Pin
npaterson31-Jul-07 6:23
npaterson31-Jul-07 6:23 
GeneralRe: TextBox Field Pin
Tarus Latacki31-Jul-07 6:33
Tarus Latacki31-Jul-07 6:33 
GeneralRe: TextBox Field Pin
npaterson31-Jul-07 8:38
npaterson31-Jul-07 8:38 
GeneralRe: TextBox Field Pin
Tarus Latacki31-Jul-07 8:51
Tarus Latacki31-Jul-07 8:51 
GeneralRe: TextBox Field Pin
npaterson31-Jul-07 17:07
npaterson31-Jul-07 17:07 
I believe I can't see all of your code from the aspx page, but assume that you have asp.net server controls in the template columns as I do.
Write a htm page and put an input box on it and wire it to the javascript onkeypress event, ensure that the TAB key on your machine is 9 - as I read there are some differences in javascript's interpretation of the tab key and keyCode
GeneralRe: TextBox Field Pin
Tarus Latacki1-Aug-07 5:55
Tarus Latacki1-Aug-07 5:55 
GeneralTAB keycode Pin
Roberto_Rwk26-Jul-07 20:52
Roberto_Rwk26-Jul-07 20:52 
GeneralRe: TAB keycode Pin
npaterson28-Jul-07 9:30
npaterson28-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.