Problem updating Gridview row by pressing Enter

Question

I have a gridview that uses an imagebutton as an update button. When the user edits a row I would like the user to be able to update the row by pressing Enter. The problem I'm having is that though the RowCommand event is fired, the CommandName is still "Edit" instead of "Update so my update code never gets executed. What I've done is hook up some javascript to the textbox in the RowDataBound handler:

 Protected Sub uxShoppingCart_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim gvr As GridViewRow = DirectCast(e.Row, GridViewRow)
            If (e.Row.RowState And DataControlRowState.Edit) = DataControlRowState.Edit Then
                Dim edit_Qty As TextBox = DirectCast(gvr.FindControl("edit_Qty"), TextBox)
                Dim uxUpdateButton As ImageButton = DirectCast(gvr.FindControl("uxUpdateButton"), ImageButton)
                uxQty.Attributes.Add("onkeypress", "return clickButton(event,'" & uxUpdateButton.ClientID & "')")
                edit_Qty.Focus()
            End If
        End If
    End Sub

The javascript function is as follows:

function clickButton(e, buttonid) {
    var bt = document.getElementById(buttonid);
    if (typeof bt == 'object') {
        if (navigator.appName.indexOf("Netscape") > (-1)) {
            if (e.keyCode == 13) {
                bt.click();
                return false;
            }
        }
        if (navigator.appName.indexOf("Microsoft Internet Explorer") > (-1)) {
            if (event.keyCode == 13) {
                bt.click();
                return false;
            }
        }
    }
}

And here's the button declaration

<EditItemTemplate>
    <span style="display: inline; white-space: nowrap;">
     <asp:ImageButton ID="uxUpdateButton" runat="server" CausesValidation="True" CommandName="Update" ImageUrl="~/images/icons/accept.png" AlternateText="Update" ToolTip="Update"></asp:ImageButton>
     <asp:ImageButton ID="uxCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" ImageUrl="~/images/icons/cancel.png" AlternateText="Cancel" ToolTip="Cancel"></asp:ImageButton>
    </span>
</EditItemTemplate>

If I click the update button using the mouse the CommandName "Update" gets passed as expected, just not when I "click" it via javascript. Any help would be appreciated.

Answer 1

I was finally able to return to this with a fresh eye. It turns out the problem is the maskededitextender from the ajaxcontroltoolkit that I'm using with the field. I'm guessing the extender is intercepting the onkeypress event.

Here's my solution. I got rid of the maskededitextender and used straight javascript instead and assigned my javascript function to the textbox's onkeypress event:

AddQty.Attributes.Add("onkeypress", "return NumericInput(event,'" & uxAddButton.ClientID & "')")

And here's the javascript:

<script type="text/javascript">
    function NumericInput(e, id) {
        if (!e) e = window.event;
        if (e.keyCode > 31 && (e.keyCode < 48 || e.keyCode > 57)) {
            return false;
        } else {
            if (e.keyCode == 13) {
                var bt = document.getElementById(id);
                if (bt != null) {
                    bt.click();
                    return false;
                }
            }
        }
    } 
 </script>