Introduction:

A while back an article was published on www.gridviewguy.com which explained how to add a single row at the bottom of the GridView control. You can read the article using this link. Many readers were interested in the idea of adding multiple rows to the GridView. This article explains how to add multiple rows to the GridView control.

Populating the GridView Control:

The first task is to populate the GridView control. We will be using the LINQ to SQL Classes to populate the GridView but you can use any data container that you like.

private void BindData()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            gvReport.DataSource = GetProducts();
            gvReport.DataBind();
        }

        // since the product list is long I am only selecting three products
        private List<Product> GetProducts()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return (from p in northwind.Products
                    select p).Take(3).ToList<Product>();
        }

The database is the Northwind database and we are using the Products table of the database. The GetProducts method returns the top three products from the Products table (You can return all the rows it does not really matter).

Here is the ASPX part of the code:

<asp:GridView ID="gvReport" runat="server" AutoGenerateColumns="false">
   
    <Columns>
   
    <asp:TemplateField HeaderText="ProductName">
    <ItemTemplate>
    <%# Eval("ProductName") %>
   
    <asp:TextBox ID="txtProductName" runat="server" Visible='<%# DoesProductExists( (string) Eval("ProductName"))  %>' />
   
    </ItemTemplate>
    </asp:TemplateField>
   
     <asp:TemplateField HeaderText="CategoryID">
    <ItemTemplate>
   <asp:DropDownList ID="ddlCategories" DataSource=<%# GetCategories() %> DataTextField="CategoryName" DataValueField="id" runat="server" />
    </ItemTemplate>
    </asp:TemplateField>
   
    </Columns>
   
    </asp:GridView>

The first column displays the “ProductName”. If the ProductName is not available then a TextBox is created which is used to enter a new ProductName.

The GetCategories method is used to populate the DropDownList in the second column of the GridView control. Here is the implementation of the GetCategories method.

  protected List<Category> GetCategories()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return northwind.Categories.ToList<Category>();
        }

Adding New Rows to the GridView Control:

Now, let’s see how to add new rows to the GridView control. The rows are added using the “Add” Button control. Here is the implementation of the add button click.

// adds the new row
        protected void Button1_Click(object sender, EventArgs e)
        {
            Count += 1;

            var list = GetProducts();
            // add empty elements at the end of the list
            list.AddRange(new Product[Count]);
           
            gvReport.DataSource = list;
            gvReport.DataBind();
        }

Let’s first talk about how we are going to add empty rows to the GridView control. Each time a button is clicked the postback is triggered. So, we need a way to know how many empty rows have to be created. We will use ViewState to store the number of rows that have to be created and then add the rows in the product list as empty products.

The Count property in the button click code is used to store the number of empty rows to be created. Here is the implementation of the Count property.

public int Count
        {
            get
            {
                if (ViewState["Count"] == null)
                    return 0;

                return (int) ViewState["Count"];
            }
            set
            {
               
                ViewState["Count"] = value;
            }
        }

The list.AddRange(new Product[Count]); line is used to append the rows to the product list.

The effect is shown in the GIF Animation below:

I have also used UpdatePanel to eliminate the server postback.

I hope you liked the article, happy coding!