In my previous examples, I have demonstrated on how to add dynamic rows in GridView control with TextBoxes and how to save the values into the database. Now, seems that most of the developers are asking if how to add a delete functionality with it. So in this example, I’m going to show on how to delete a certain row in the dynamic GridView with TextBoxes.

 

Note: Before reading this example, be sure to refer my previous examples mentioned above so that you will have a basic idea on how the dynamic does TextBox is being generated in the GridView. Also in this example, I will only focus on the Deletion part so it means that I will not elaborate more on the dynamic TextBox generation.

 

Here are the code blocks below:

 

GRIDVIEW MARKUP (ASPX Source):

 

      <asp:gridview ID="Gridview1" runat="server" ShowFooter="true"

            AutoGenerateColumns="false" onrowcreated="Gridview1_RowCreated">

            <Columns>

            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

            <asp:TemplateField HeaderText="Header 1">

                <ItemTemplate>

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField HeaderText="Header 2">

                <ItemTemplate>

                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField HeaderText="Header 3">

                <ItemTemplate>

                     <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

                </ItemTemplate>

                <FooterStyle HorizontalAlign="Right" />

                <FooterTemplate>

                 <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"

                        onclick="ButtonAdd_Click" />

                </FooterTemplate>

            </asp:TemplateField>

                 <asp:TemplateField>

                <ItemTemplate>

                    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Remove</asp:LinkButton>

                </ItemTemplate>

            </asp:TemplateField>

            </Columns>

        </asp:gridview>

 

As you noticed, we have added a LinkButton at the very last column of the GridView wherein a user can delete a row when he invokes it.

 

CODES FOR DELETE:

 

// Hide the Remove Button at the last row of the GridView

    protected void Gridview1_RowCreated(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

              DataTable  dt = (DataTable)ViewState["CurrentTable"];

              LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");

              if (lb != null)

              {

                  if (dt.Rows.Count > 1)

                  {

                      if (e.Row.RowIndex == dt.Rows.Count - 1)

                      {

                          lb.Visible = false;

                      }

                  }

                  else

                  {

                      lb.Visible = false;

                  }

              }

        }

    }

 

    protected void LinkButton1_Click(object sender, EventArgs e)

    {

        LinkButton lb = (LinkButton)sender;

        GridViewRow gvRow = (GridViewRow) lb.NamingContainer;

        int rowID = gvRow.RowIndex + 1;

        if (ViewState["CurrentTable"] != null)

        {

          DataTable  dt = (DataTable)ViewState["CurrentTable"];

          if (dt.Rows.Count > 1)

          {

              if (gvRow.RowIndex < dt.Rows.Count -1)

              {

                  //Remove the Selected Row data

                  dt.Rows.Remove(dt.Rows[rowID]);

              }

          }

            //Store the current data in ViewState for future reference

            ViewState["CurrentTable"] = dt;

            //Re bind the GridView for the updated data

            Gridview1.DataSource = dt;

            Gridview1.DataBind();

        }

 

        //Set Previous Data on Postbacks

        SetPreviousData();

    }

 

 

As you can see, the code above was pretty straight forward. The output would look something like these below:

 

On Initial Load:


GridView With Dynamic TextBoxes ASP.Net

Adding Rows to GridView


Adding Dynamic Rows to ASP.Net GridView Control

After Removing a Row in a GridView


Removing or Deleting Dynamic Rows with Textboxes from ASP.Net GridView Control

That’s it! Hope you will find this example useful! Download the sample source code using the link below

Download Code (3.22 kb)