ADDING DYNAMIC ROWS IN ASP.NET GRIDVIEW CONTROL WITH TEXTBOXES AND WITH DELETE FUNCTIONALITY

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, then be sure to refer my previous examples mentioned above so that you will have a basic idea on how does the dynamic TextBox is being generated. Also in this example, I will only focus on the Deletion part so it means that I will not elaborate more on the dynmic 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:

Adding Rows to GridView

After Removing a Row in a GridView

That’s it! Hope you will find this example useful!

Thanks Shibashish Mohanty