Handling the Enter key pressed in a GridView's row edit mode

Introduction

This article demonstrates how to tie the Enter key pressed during a row edit to the GridView's Update event, passing the CommandName, CommandArgument, and RowIndex. During the edit of a row, the Enter key will be captured, and then a postback call will occur, which will fire the GridView's events OnRowCommand and OnRowUpdating. Once this happens, we can do our update to the database within the routines gvChild_RowCommand or gvChild_RowUpdating.

ASPX Page

In this ASPX page, the GridView is defined with the various events needed:

<asp:GridView ID="gvChild" 
    runat="server" AutoGenerateColumns="False" 
    DataKeyNames="product_arm_type_skey,arm_type,rate_index_type_skey,product_type_skey"
    SkinID="SearchResultsGridViews" 
    OnRowUpdating="gvChild_RowUpdating" 
    OnRowCancelingEdit="gvChild_RowCancelingEdit" 
    OnRowDataBound="gvChild_RowDataBound"
    OnRowEditing="gvChild_RowEditing" 
    OnRowCommand="gvChild_RowCommand" 
    OnRowCreated="gvChild_RowCreated"> 
<Columns>
<asp:TemplateField>
    <ItemTemplate>
        <asp:ImageButton ID="btnEdit" runat="server" ToolTip="Edit" 
        CommandName="Edit" CommandArgument="<%# Container.DataItemIndex %>" 
        ImageUrl="~/Images/EditDocument.gif" /> 
    </ItemTemplate> 
    <EditItemTemplate> 
        <asp:ImageButton ID="btnUpdate" runat="server" ToolTip="Update" 
        CommandName="Update" CommandArgument="<%# Container.DataItemIndex %>" 
        ImageUrl="~/Images/Save.gif" /> 
        <asp:ImageButton ID="btnCancel" runat="server" ToolTip="Cancel" 
        CommandName="Cancel" CommandArgument="<%# Container.DataItemIndex %>" 
        ImageUrl="~/Images/close.png" /> 
    </EditItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView>

ASPX.CS Page

In the code-behind page, we will examine the different events: OnRowDataBound, OnRowCommand, and OnRowUpdating. In gvChild_RowDataBound, for each Row Edit (DataControlRowState.Edit) in the GridView, we add an onkeypress event for the row. On this onkeypress event, we add the JavaScript logic to be executed. First, we look if event.keyCode == 13, which is looking for the Enter key. If the Enter key is pressed, we call __doPostBack with the following parameters: The first parameter is gvChild.UniqueID which is the unique ID of the GridView. The next parameter contains both the CommandName (Update$) and the CommandArgument (e.Row.RowIndex.ToString()). So, when the Enter key is pressed, gvChild_RowCommand will get fired. It will go to the else if statement e.CommandName == "Update" and then it will get the row information based on e.CommandArgument which contains the row index to be updated. I chose to do the update of the database in gvChild_RowCommand, but you could also handle the update in gvChild_RowUpdating.

protected void gvChild_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // if enter key is pressed (keycode==13) call __doPostBack on grid and with 
    // 1st param = gvChild.UniqueID (Gridviews UniqueID)
    // 2nd param = CommandName=Update$  +  CommandArgument=RowIndex
    if ((e.Row.RowState == DataControlRowState.Edit) || 
       (e.Row.RowState == (DataControlRowState.Edit|DataControlRowState.Alternate)))
    {
        e.Row.Cells[0].Width = Unit.Pixel(35);
        e.Row.Attributes.Add("onkeypress", "javascript:if (event.keyCode == 13) { 
            __doPostBack('" + gvChild.UniqueID + "', 'Update$" + 
           e.Row.RowIndex.ToString() + "'); return false; }");
    } 
}


protected void gvChild_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "copy")
    { 
    }
    else if (e.CommandName == "remove")
    {
    } 
    else if (e.CommandName == "up")
    {
    }
    else if (e.CommandName == "down")
    {
    }
    else if (e.CommandName == "Update")
    {
         GridViewRow row = gvChild.Rows[Convert.ToInt32(e.CommandArgument)];
         ProductArmType pat = GetByProductArmTypeSkey(productArmTypeSkey);
         pat.CustomProductName = 
            ((TextBox)(row.FindControl("txtCustomName"))).Text;
         DataRepository.ProductArmTypeProvider.Update(pat);
         gvChild.EditIndex = -1;
    } 
    gvChild.EditIndex = -1;
    BindChild();  //rebind gvChild gridview after update or any other command
}

protected void gvChild_RowUpdating(object sender, GridViewUpdateEventArgs e)
{ 
    //Could handle update here, but chose to do it in gvChild_RowCommand
}

Conclusion

This small coding example allows the user to trap the Enter key during a row edit. When typing changes in the fields during row edit and pressing Enter, a postback is done which executes the GridView's OnRowCommand and OnRowUpdating events. In these events, we do the update to the database based on the CommandName passed in (Update) and the CommandArgument passed in (in our case, RowIndex). From there, we can get the current GridView's row based on the index and read out the fields of the row and then update the database.