Geeks With Blogs
AzamSharp Some day I will know everything. I hope that day never comes.

Yesterday, I received an email from a user who wanted to know how to add multiple rows to the GridView control. This means that you can add any number of rows using the "Add" button and the rows will append at the end of the GridView control.

Let's first populate the GridView control.

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

        private List<Product> GetProducts()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return (from p in northwind.Products
                    select p).Take(3).ToList<Product>();
        }

The GridView also contains a DropDownList so let's also populate the DropDownList.

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

Here it the ASPX code for the GridView control:

 <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>

 

As, you can see I also have a TextBox control inside the ItemTemplate of the GridView control. This is to allow the user to add text when the new row is created. The TextBox will only be displayed if the row does not contain any data.

 protected bool DoesProductExists(string productName)
        {
            if (String.IsNullOrEmpty(productName)) return true;

            return false;
        }

 

Now, let's say I click on the "Add" button then the following event is fired.

 // 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();
        }

Count is a ViewState property as shown below:

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

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

The Count property determines how many rows to append to the GridView control. I have also used the UpdatePanel to make the effect Postbackless :).

Here is the animation of the effect:

Posted on Wednesday, February 6, 2008 6:09 AM | Back to top


Comments on this post: Adding Multiple Rows to the GridView Control

# re: Adding Multiple Rows to the GridView Control
Requesting Gravatar...
you have describe it very breifly but can u explore it more using snap shots
Left by sanam on May 12, 2008 8:07 PM

# re: Adding Multiple Rows to the GridView Control
Requesting Gravatar...
Please send the source code
Left by Subhradip Dey on Sep 26, 2010 3:58 AM

Your comment:
 (will show your gravatar)


Copyright © Mohammad Azam | Powered by: GeeksWithBlogs.net