Saturday, February 25

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

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty