Capturing the Enter key when editing a GridView textbox

Question

I have a GridView defined like this:

<asp:GridView ID="myGridView" ruant="server">
    <asp:BoundField DataField="myField" />
    <asp:CommandField ShowDeleteButton="true" ShowEditButton="true" />
</asp:GridView>

After I put a row into edit mode with the Edit button, how do I capture the Enter key and trigger the resulting Update on the row? Right now if I hit enter, the page reloads, what was entered into the TextBox is lost, and the row stays in edit mode. I know how to disable the enter key entirely on the form (the current workaround), but I'd like to have it fire the Update command.

Answer 1

Well, using the knowledge from the question you linked, it's simple:

string js = "if (event.keyCode == 13) this.form.submit();"
myGridView.Attributes.Add("onkeydown", js);

As we found out in the comments, this introduces a small problem. The GridView_RowUpdating server event does not fire anymore, but the question author relies on it.

In short - the server event model relies on the form field __EVENTTARGET to be set. This form field is not sent when just calling the form.submit(). A solution would be to "click" the relevant button with JavaScript.

string js = "if ((event.which && event.which == 13) || " 
            + "(event.keyCode && event.keyCode == 13)) "
            + "{document.myForm.Update.click();return false;} "
            + "else return true;";
myGridView.Attributes.Add("onkeydown", js);

See "Using the enter key to submit a form" on AllAsp.net, which covers the issue in more detail.

Answer 2

Where should be the code placed?

Answer 3

Set "UseSubmitBehavior" property of buttons on the page to "False" (default is True) solves the submit issue in several comments.

Answer 4

The code suggested above is not quite right. This code

document.myForm.Update.click()

suggests that the button name is Update which is not since it is IDless and nameless since it is <asp:CommandField ShowEditButton="True" ...>

If I assign ID to it programatically within the gridview onrowdatabound event:

Dim tmpButton1 As Button = CType(e.Row.Cells(4).Controls(2), Button)
If Not tmpButton1 Is Nothing Then tmpButton1.ID = "btnMyUpdate"

I still can't access it through javascript cause it generates different name for each row:

GridView1_ctl02_btnMyUpdate or GridView1$ctl02$ctl00 or GridView1$ctl03$ctl00 etc.

Please help

Answer 5

How can this be done in C#?