Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes
To get started, let’s grab a GridView control from the Visual Studio Toolbox and put it in the Web Form. The mark up would look something like this:
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicTextBoxCreateOnly.aspx.cs" Inherits="DynamicTextBoxCreateOnly" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Row" HeaderText="Row" />
<asp:TemplateField HeaderText="Shiba1">
<ItemTemplate>
<asp:TextBox ID="shibashish1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Shiba2">
<ItemTemplate>
<asp:TextBox ID="shibashish2" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Shiba3">
<ItemTemplate>
<asp:TextBox ID="shibashish3" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div align="center" style="width: 802px">
<asp:Button ID="AddTextbox" runat="server" Text="AddTextbox"
onclick="AddTextbox_Click" />
</div>
<div>
</div>
</form>
</body>
</html>
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicTextBoxCreateOnly.aspx.cs" Inherits="DynamicTextBoxCreateOnly" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Row" HeaderText="Row" />
<asp:TemplateField HeaderText="Shiba1">
<ItemTemplate>
<asp:TextBox ID="shibashish1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Shiba2">
<ItemTemplate>
<asp:TextBox ID="shibashish2" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Shiba3">
<ItemTemplate>
<asp:TextBox ID="shibashish3" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div align="center" style="width: 802px">
<asp:Button ID="AddTextbox" runat="server" Text="AddTextbox"
onclick="AddTextbox_Click" />
</div>
<div>
</div>
</form>
</body>
</html>
Now let’s switch to the Code behind part of the web form.
As you may know, the GridView control will not show in the page once there is no data associated on it. So the first thing we need here is to set an initial data in the GridView Control. To do this, we can use a DataTable for binding our GridView.
Here’s the code block below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class DynamicTextBoxCreateOnly : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
SetInitialRow();
}
}
private void SetInitialRow()
{
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("Row", 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)));
dr = dt.NewRow();
dr["Row"] = 1;
dr["Column1"] = string.Empty;
dr["Column2"] = string.Empty;
dr["Column3"] = string.Empty;
dt.Rows.Add(dr);
//dr = dt.NewRow();
//Store the DataTable in ViewState
ViewState["CurrentTable"] = dt;
GridView1.DataSource = dt;
GridView1.DataBind();
}
private void SetPreviousData()
{
int rowIndex = 0;
if (ViewState["CurrentTable"] != null)
{
DataTable dt = (DataTable)ViewState["CurrentTable"];
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
TextBox box1 = (TextBox)GridView1.Rows[rowIndex].Cells[1].FindControl("shibashish1");
TextBox box2 = (TextBox)GridView1.Rows[rowIndex].Cells[2].FindControl("shibashish2");
TextBox box3 = (TextBox)GridView1.Rows[rowIndex].Cells[3].FindControl("shibashish3");
box1.Text = dt.Rows[i]["Column1"].ToString();
box2.Text = dt.Rows[i]["Column2"].ToString();
box3.Text = dt.Rows[i]["Column3"].ToString();
rowIndex++;
}
}
}
}
private void AddNewRowToGrid()
{
int rowIndex = 0;
if (ViewState["CurrentTable"] != null)
{
DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
DataRow drCurrentRow = null;
if (dtCurrentTable.Rows.Count > 0)
{
for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
{
//extract the TextBox values
TextBox box1 = (TextBox)GridView1.Rows[rowIndex].Cells[1].FindControl("shibashish1");
TextBox box2 = (TextBox)GridView1.Rows[rowIndex].Cells[2].FindControl("shibashish2");
TextBox box3 = (TextBox)GridView1.Rows[rowIndex].Cells[3].FindControl("shibashish3");
drCurrentRow = dtCurrentTable.NewRow();
drCurrentRow["Row"] = i + 1;
dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;
rowIndex++;
}
dtCurrentTable.Rows.Add(drCurrentRow);
ViewState["CurrentTable"] = dtCurrentTable;
GridView1.DataSource = dtCurrentTable;
GridView1.DataBind();
}
}
else
{
Response.Write("ViewState is null");
}
//Set Previous Data on Postbacks
SetPreviousData();
}
protected void AddTextbox_Click(object sender, EventArgs e)
{
AddNewRowToGrid();
}
}
Page View:-
Running Mode:-
You might also Like:
