Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality

 
      <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

1 comments:

Unknown said...

This Code Not Work...

Post a Comment