In this post we will see, how to add multiple rows. The complete source code can be downloded from here

Download: GridView_Dynamic_rows.zip (3.34 kb) 

 As shown in figure. Here we are adding 12 new rows into existing Grid.

GridView code

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
                ForeColor="#333333" GridLines="None">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <%# Container.DataItemIndex+1 %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="First name">
                        <ItemTemplate>
                            <asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"FirstName") %>'
                                runat="server" Visible='<% # (DataBinder.Eval(Container.DataItem,"FirstName")!="")?true:false%>'></asp:Label>
                            <asp:TextBox ID="TextBox2" Text='<%# DataBinder.Eval(Container.DataItem,"LastName") %>'
                                Visible='<%# IsNullItem((DataBinder.Eval(Container.DataItem,"FirstName"))) ? true : false %>'
                                runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Last name">
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Visible='<% # (DataBinder.Eval(Container.DataItem,"LastName")!="")?true:false%>'
                                Text='<%#DataBinder.Eval(Container.DataItem,"LastName") %>'></asp:Label>
                            <asp:TextBox ID="txtLastName" Visible='<%# IsNullItem((DataBinder.Eval(Container.DataItem,"LastName"))) ? true : false %>'
                                runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Email address">
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Email") %>'
                                Visible='<% # (DataBinder.Eval(Container.DataItem,"Email")!="")?true:false%>'></asp:Label>
                            <asp:TextBox ID="txtEmail" Visible='<%# IsNullItem((DataBinder.Eval(Container.DataItem,"Email"))) ? true : false %>'
                                runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView> 

Based on wheather the Data is null or empty we are changing visibility of Labelboxes and TextBoxes. 

C#.Net Code:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class GridView_Add_Multiple_rows : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void LinkButton1_Click(object sender, EventArgs e)

{

DataTable dt = GridDataProvider.GetData();

for(int i=1; i< Convert.ToInt16(TextBox1.Text); i++)

{

DataRow dr = dt.NewRow();

dt.Rows.Add(dr);

}

GridView1.DataSource = dt;

GridView1.DataBind();

}

public bool IsNullItem(Object o)

{

if( o == System.DBNull.Value)

return true;

else return false;

}

protected void LinkButton2_Click(object sender, EventArgs e)

{

foreach(GridViewRow gr in GridView1.Rows)

{

string email = ((TextBox)gr.FindControl("txtEmail")).Text;

// Here you can call your Data base routines to store values

if(!string.IsNullOrEmpty(email))

Response.Write(email);

}

}

}

 

VB.Net code:

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Public Partial Class GridView_Add_Multiple_rows
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       
    End Sub
    Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
        Dim dt As DataTable = GridDataProvider.GetData()
       
        For i As Integer = 1 To Convert.ToInt16(TextBox1.Text) - 1
            Dim dr As DataRow = dt.NewRow()
            dt.Rows.Add(dr)
        Next
       
        GridView1.DataSource = dt
        GridView1.DataBind()
    End Sub
   
    Public Function IsNullItem(ByVal o As [Object]) As Boolean
        If o = System.DBNull.Value Then
            Return True
        Else
            Return False
        End If
    End Function
    Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As EventArgs)
        For Each gr As GridViewRow In GridView1.Rows
            Dim email As String = DirectCast(gr.FindControl("txtEmail"), TextBox).Text
            ' Here you can call your Data base routines to store values
            If Not String.IsNullOrEmpty(email) Then
                Response.Write(email)
               
            End If
        Next
    End Sub
End Class  

IsNullItem function will check wheather data is null or not. It will help us to toggle visibility of Label and textBox.

Satalaj

Here is .aspx source code:

Vb.Net code

    In this post I will edit all rows of GridView control. The complete source code can be downloaded from here

GridViewEditAll.zip (3.65 kb)

 

In GridView ItemTemplate we have added two controls, Label control for showing text data and TextBox for editing the data

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">

<Columns>

<asp:TemplateField HeaderText="Sr.No.">

<ItemTemplate>

<%# Container.DataItemIndex+1 %>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="First Name">

<ItemTemplate>

&nbsp;<asp:Label ID="lblFirstName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"FirstName") %>'></asp:Label><br />

<asp:TextBox ID="txtFirstName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"FirstName") %>' Visible="False"></asp:TextBox>

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

</FooterTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Last Name">

<ItemTemplate>

<asp:Label ID="lblLastName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LastName") %>'></asp:Label>

<br />

<asp:TextBox ID="txtLastName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LastName") %>'

Visible="False"></asp:TextBox>

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>

</FooterTemplate>

<EditItemTemplate>

<asp:TextBox ID="txtLastName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LastName") %>'></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Email">

<ItemTemplate>

<asp:Label ID="lblEmail" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Email") %>'></asp:Label>

<asp:TextBox ID="txtEmail" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Email") %>'

Visible="False"></asp:TextBox>

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</FooterTemplate>

</asp:TemplateField>

</Columns>

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="White" />

</asp:GridView>

 

On Edit all link button we are showing the Texboxes and hiding the label controls found in Item Template of GrodView control.

  protected void LinkButton1_Click(object sender, EventArgs e)
    {
        foreach (GridViewRow gr in GridView1.Rows)
        {
            TextBox t = (TextBox)gr.FindControl("txtFirstName");
            TextBox tLastName = (TextBox)gr.FindControl("txtLastName");
            TextBox tEmail = (TextBox)gr.FindControl("txtEmail");
            Label lFirstName = (Label)gr.FindControl("lblFirstName");
            Label lLastName = (Label)gr.FindControl("lblLastName");
            Label lEmail = (Label)gr.FindControl("lblEmail");

            if (t.Visible)
            {
                t.Visible = false;
                tLastName.Visible = false;
                tEmail.Visible = false;
                lFirstName.Visible = true;
                lLastName.Visible = true;
                lEmail.Visible = true;
            }
            else
            {
                t.Visible = true;
                tLastName.Visible = true;
                tEmail.Visible = true;
                lFirstName.Visible = false;
                lLastName.Visible = false;
                lEmail.Visible = false;

            }

        }
    }

We can save all edited rows by clicking on Save all link button

 protected void LinkButton2_Click(object sender, EventArgs e)
    {
        foreach (GridViewRow gr in GridView1.Rows)
        {
            TextBox t = (TextBox)gr.FindControl("txtFirstName");
            TextBox tLastName = (TextBox)gr.FindControl("txtLastName");
            TextBox tEmail = (TextBox)gr.FindControl("txtEmail");
            Label lFirstName = (Label)gr.FindControl("lblFirstName");
            Label lLastName = (Label)gr.FindControl("lblLastName");
            Label lEmail = (Label)gr.FindControl("lblEmail");

            // Call your SQL server Data Access layer to save appropriate fields.

        }

    }

    Here I will bind GridView fields to HyperLink and I will post it to bing.com to let it do search.  

<ItemTemplate>

<asp:HyperLink ID="HyperLink1" 
        
runat="server"
        
NavigateUrl='<%# "Http://www.bing.com?q="+DataBinder.Eval(Container.DataItem,"FirstName") %>'

Text='<%#DataBinder.Eval(Container.DataItem,"FirstName") %>'>

</asp:HyperLink>

</ItemTemplate>

In above code snippet we have, gridview dynamic hyperlink.

NavigateUrl='<%# "Http://www.bing.com?q="+DataBinder.Eval(Container.DataItem,"FirstName") %>'

The DataBinder.Eval will extract FirstName from the DataSource.

 

Here we will add new coloumn to GridView which will show serial number of the row 

   <asp:TemplateField HeaderText="Sr.No.">                   
                    <ItemTemplate>
                       <%# Container.DataItemIndex+1 %>
                    </ItemTemplate>
  </asp:TemplateField>