I want to prevent ASP.NET GridView from reacting to the enter button

Question

I have an ASP.NET page with a gridview control on it with a CommandButton column with delete and select commands active.

Pressing the enter key causes the first command button in the gridview to fire, which deletes a row. I don't want this to happen. Can I change the gridview control in a way that it does not react anymore to pressing the enter key?

There is a textbox and button on the screen as well. They don't need to be responsive to hitting enter, but you must be able to fill in the textbox. Currently we popup a confirmation dialog to prevent accidental deletes, but we need something better than this.

This is the markup for the gridview, as you can see it's inside an asp.net updatepanel (i forgot to mention that, sorry): (I left out most columns and the formatting)

<asp:UpdatePanel ID="upContent" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnFilter" />
            <asp:AsyncPostBackTrigger ControlID="btnEdit" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <div id="CodeGrid" class="Grid">
                <asp:GridView   ID="dgCode" runat="server">
                    <Columns>
                        <asp:CommandField SelectImageUrl="~/Images/Select.GIF"
                                            ShowSelectButton="True"
                                            ButtonType="Image"
                                            CancelText=""
                                            EditText=""
                                            InsertText=""
                                            NewText=""
                                            UpdateText=""
                                            DeleteImageUrl="~/Images/Delete.GIF"
                                            ShowDeleteButton="True" />
                        <asp:BoundField DataField="Id"  HeaderText="ID" Visible="False" />
                    </Columns>
                </asp:GridView>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

Answer 1

This solution is blocking the enter key on the entire page

Disable Enter Key

Answer 2

Every once in a while I get goofy issues like this too... but usually I just implement a quick hack, and move on :)

myGridView.Attributes.Add("onkeydown", "if(event.keyCode==13)return false;");

Something like that should work.

Answer 3

In the PreRender event you can toggle

Private Sub gvSerials_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvSerials.PreRender
    If gvSerials.EditIndex < 0 'READ ONLY MODE
        'Enables the form submit during Read mode on my 'search' submit button
        Me.bnSearch.UseSubmitBehavior = True
    Else 'EDIT MODE
        'disables the form submit during edit mode, this allows the APPLY/Update button to be activated after Enter Key is pressed (which really is creating a form submit)
        Me.bnSearch.UseSubmitBehavior = False
    End If

Answer 4

In Page_Load, set the focus on the textbox.

Answer 5

Here is a good jQuery way of doing it. This function will automagically add the keydown event handler to all TextBoxes on the page. By using different selectors, you can control it to more or less granular levels:

//jQuery document ready function – fires when document structure loads
$(document).ready(function() {

   //Find all input controls of type text and bind the given
   //function to them
   $(":text").keydown(function(e) {
      if (e.keyCode == 13) {
          return false;
       }
   });

});

This will make all textboxes ignore the Enter key and has the advantage of being automatically applied to any new HTML or ASP.Net controls that you might add to the page (or that may be generated by ASP.Net).

Answer 6

For anyone else having the same problem where this code is not preventing the event from firing, this worked for me:

if (window.event.keyCode == 13) {    
    event.returnValue=false;     
    event.cancel = true;
}