ASP Snippets

Categories






Alerts

Free Alerts

Your email will always be
private and will not be shared.




Follow us on twitter.




Zoom In | Zoom Out

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

Author:Vinz

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

Adding Dynamic Rows in GridView with TextBoxes and with Delete.zip (3.22 kb)



Posted: Aug 24 2009, 14:55 by Vinz | Comments (0) RSS comment feed |
Filed under: ASP.Net | C# | GridView

Views: 9407
Page copy protected against web site content infringement by Copyscape


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share





Comments









Community News





Web Hosting SpotLight


Consulting


For consulting and work related queries click here.



Advertise


Advertise with us. For more details click here.


Suggestions


Please provide your valuable suggesstions here.

This Site is hosted on

Lunarpages.com Web Hosting