In this article I will explain with an example, how to add dynamic rows in
GridView control with Textboxes using
ASP.Net in C# and VB.Net.
HTML Markup
The following HTML Markup consists of:
GridView – For displaying data.
Columns
The GridView consists of one BoundField column and three TemplateField columns.
TemplateField
The TemplateField column consists of ItemTemplate which contains TextBox controls and FooterTemplate consists of a Button.
<asp:GridView ID="GridView1" runat="server" ShowFooter="true" AutoGenerateColumns="false">
<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>
<FooterTemplate>
<asp:Button ID="btnAdd" runat="server" Text="Add New Row" OnClick="OnAdd" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Bind DataTable to GridView
Inside the Page_Load event handler, the SetInitialRow method is called.
SetInitialRow
Inside the SetInitialRow method, the DataTable is store inside the ViewState.
Finally, the DataTable assigned with the DataSource property of the GridView.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.SetInitialRow();
}
}
private void SetInitialRow()
{
//Store the DataTable in ViewState.
ViewState["CurrentTable"] = this.CurrentTable;
GridView1.DataSource = this.CurrentTable;
GridView1.DataBind();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.SetInitialRow()
End If
End Sub
Private Sub SetInitialRow()
'Store the DataTable in ViewState.
ViewState("CurrentTable") = Me.CurrentTable
GridView1.DataSource = Me.CurrentTable
GridView1.DataBind()
End Sub
Adding Dynamic Row
OnAdd
When the Add button is clicked, the AddNewRowtoGrid method is called.
AddNewRowtoGrid
Inside the AddNewRowtoGrid method, the check is performed if the DataTable is not null returned from the CurrentTable.
Then, DataTable and DataRow class object is created and again the check is performed if DataTable row count is greater than 0.
The FOR EACH loop is executed and textbox values are extracted, if not it displays the message in
JavaScript alert message box.
CurrentTable
Inside the CurrentTable method, get and set method is called.
Inside get method, the check is performed if the ViewState is not null then, it returns DataTable if not then, it can create DataTable and DataRow class object and return the DataTable.
Inside set method, ViewState is set with the value.
SetPreviousData
Inside the SetPreviousData method, the check is performed if the DataTable not equal to NULL.
Then, the DataTable class object is created again check is performed if count greater than 0.
The FOR EACH loop is executed and textboxes values are set.
C#
protected void OnAdd(object sender, EventArgs e)
{
this.AddNewRowToGrid();
}
private void AddNewRowToGrid()
{
if (this.CurrentTable != null)
{
DataTable dtCurrentTable = this.CurrentTable;
DataRow drCurrentRow = null;
if (dtCurrentTable.Rows.Count > 0)
{
int i = 1;
foreach (GridViewRow row in GridView1.Rows)
{
//Extract the TextBox values.
TextBox box1 = (TextBox)row.FindControl("TextBox1");
TextBox box2 = (TextBox)row.FindControl("TextBox2");
TextBox box3 = (TextBox)row.FindControl("TextBox3");
drCurrentRow = dtCurrentTable.NewRow();
drCurrentRow["RowNumber"] = i + 1;
dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;
i++;
}
dtCurrentTable.Rows.Add(drCurrentRow);
this.CurrentTable = dtCurrentTable;
GridView1.DataSource = dtCurrentTable;
GridView1.DataBind();
}
}
else
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('ViewState is null.');", true);
}
//Set Previous Data on PostBack.
this.SetPreviousData();
}
private DataTable CurrentTable
{
get
{
if (ViewState["CurrentTable"] != null)
{
return (DataTable)ViewState["CurrentTable"];
}
else
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("Column1", typeof(string)));
dt.Columns.Add(new DataColumn("Column2", typeof(string)));
dt.Columns.Add(new DataColumn("Column3", typeof(string)));
DataRow dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Column1"] = string.Empty;
dr["Column2"] = string.Empty;
dr["Column3"] = string.Empty;
dt.Rows.Add(dr);
return dt;
}
}
set
{
ViewState["CurrentTable"] = value;
}
}
private void SetPreviousData()
{
int i = 0;
if (this.CurrentTable != null)
{
DataTable dt = this.CurrentTable;
if (dt.Rows.Count > 0)
{
foreach (GridViewRow row in GridView1.Rows)
{
TextBox box1 = (TextBox)row.FindControl("TextBox1");
TextBox box2 = (TextBox)row.FindControl("TextBox2");
TextBox box3 = (TextBox)row.FindControl("TextBox3");
box1.Text = dt.Rows[i]["Column1"].ToString();
box2.Text = dt.Rows[i]["Column2"].ToString();
box3.Text = dt.Rows[i]["Column3"].ToString();
i++;
}
}
}
}
VB.Net
Protected Sub OnAdd(ByVal sender As Object, ByVal e As EventArgs)
Me.AddNewRowToGrid()
End Sub
Private Sub AddNewRowToGrid()
If Me.CurrentTable IsNot Nothing Then
Dim dtCurrentTable As DataTable = Me.CurrentTable
Dim drCurrentRow As DataRow = Nothing
If dtCurrentTable.Rows.Count > 0 Then
Dim i As Integer = 1
For Each row As GridViewRow In GridView1.Rows
'Extract the TextBox values.
Dim box1 As TextBox = CType(row.FindControl("TextBox1"), TextBox)
Dim box2 As TextBox = CType(row.FindControl("TextBox2"), TextBox)
Dim box3 As TextBox = CType(row.FindControl("TextBox3"), TextBox)
drCurrentRow = dtCurrentTable.NewRow()
drCurrentRow("RowNumber") = i + 1
dtCurrentTable.Rows(i - 1)("Column1") = box1.Text
dtCurrentTable.Rows(i - 1)("Column2") = box2.Text
dtCurrentTable.Rows(i - 1)("Column3") = box3.Text
i += 1
Next
dtCurrentTable.Rows.Add(drCurrentRow)
Me.CurrentTable = dtCurrentTable
GridView1.DataSource = dtCurrentTable
GridView1.DataBind()
End If
Else
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('ViewState is null.');", True)
End If
'Set Previous Data on PostBack.
Me.SetPreviousData()
End Sub
Private Property CurrentTable As DataTable
Get
If ViewState("CurrentTable") IsNot Nothing Then
Return CType(ViewState("CurrentTable"), DataTable)
Else
Dim dt As DataTable = New DataTable()
dt.Columns.Add(New DataColumn("RowNumber", GetType(String)))
dt.Columns.Add(New DataColumn("Column1", GetType(String)))
dt.Columns.Add(New DataColumn("Column2", GetType(String)))
dt.Columns.Add(New DataColumn("Column3", GetType(String)))
Dim dr As DataRow = dt.NewRow()
dr("RowNumber") = 1
dr("Column1") = String.Empty
dr("Column2") = String.Empty
dr("Column3") = String.Empty
dt.Rows.Add(dr)
Return dt
End If
End Get
Set(ByVal value As DataTable)
ViewState("CurrentTable") = value
End Set
End Property
Private Sub SetPreviousData()
Dim i As Integer = 0
If Me.CurrentTable IsNot Nothing Then
Dim dt As DataTable = Me.CurrentTable
If dt.Rows.Count > 0Then
For Each row As GridViewRow In GridView1.Rows
Dim box1 As TextBox = CType(row.FindControl("TextBox1"), TextBox)
Dim box2 As TextBox = CType(row.FindControl("TextBox2"), TextBox)
Dim box3 As TextBox = CType(row.FindControl("TextBox3"), TextBox)
box1.Text = dt.Rows(i)("Column1").ToString()
box2.Text = dt.Rows(i)("Column2").ToString()
box3.Text = dt.Rows(i)("Column3").ToString()
i += 1
Next
End If
End If
End Sub
Screenshot
Downloads
