Error with edit CommandName on grid view after searching

Question

I have a GridView with a Textbox that searchs into the grid, plus an edit button inside the grid. All of these work well when tested individually, but if I try to use the search button, and then use edit button, this doesn't edit the right row. Example: Let's say I have 3 rows on my GridView:

Search:_________
Air    Edit 
Earth  Edit 
Sea    Edit 

If I write "sea" in the textbox and click the search button, only the "sea" record will be shown in the grid, and when press edit, the "Air" record will be displayed to edit instead of the sea record. Why is this happening and how to solve it?

EDITED: ASP Code:

    <asp:TextBox ID="TextBox1" runat="server" BackColor="#D9ECFF" 
                                        style="height: 20px; width: 186px" AutoPostBack="True"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" BackColor="#0066cc" 
                                        BorderColor="#0066cc" BorderStyle="Outset" Font-Bold="True" ForeColor="White" 
                                        style=" height: 26px; width: 56px" Text="Search"  />

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" 
AutoGenerateColumns="False" CellPadding="4" OnRowEditing="EditRow" 
OnRowCancelingEdit="CancelEditRow" DataKeyNames="AREA" DataMember="DefaultView">

  <Columns>
     <asp:BoundField DataField="AREA" HeaderText="AREA" ReadOnly="True" 
                                        SortExpression="AREA" />                                   

      <asp:TemplateField HeaderText="LEADER_USER" SortExpression="LEADER_USER">
                     <ItemTemplate><%#Eval("leader_user")%></ItemTemplate>
                      <EditItemTemplate>
                          <asp:TextBox ID="txtleaderuser" runat="server" Text='<%#Eval("leader_user")%>'/>
                      </EditItemTemplate>
       </asp:TemplateField>

       <asp:TemplateField>                                    
           <ItemTemplate>
                  <asp:ImageButton ID="editButton" runat="server" CommandName="Edit" 
                                                ImageUrl="images/pencil1.png" Text="Edit" ToolTip="Edit" />
            </ItemTemplate>
             <EditItemTemplate>
                   <asp:Button ID="BtnUpdate" runat="server" CommandName="Update" 
                                                Text="Update" />
                   <asp:Button ID="BtnCancel" runat="server" CommandName="Cancel" 
                                                Text="Cancel" />
              </EditItemTemplate>
             </asp:TemplateField>

      </Columns>
    </asp:GridView>

Search Code behind:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim miCon As New Connection
        Try
            SqlDataSource1.ConnectionString = miCon.GetConnectionString()
            SqlDataSource1.SelectCommand = "SELECT * FROM AREA WHERE area LIKE @area"
            SqlDataSource1.SelectParameters.Clear()
            SqlDataSource1.SelectParameters.Add(New Parameter("area", DbType.String, "%" + TextBox1.Text + "%"))
            GridView1.DataBind()
        Catch ex As Exception
            MsgBox(ex.ToString)
        End Try

    End Sub

Any help?

Answer 1

Without seeing all of your code, my guess is that your edit button is posting back to the server and the initial binding logic for the grid is executing again, which does not take into account a value typed into the search box; thus the first row will be Air again just like it was before you performed the search.

To stop this, put the following in your Page_Load event:

Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not IsPostBack Then
    ' Put logic here to bind the grid only when page is first loaded

    End If
End Sub