Add Row Dynamically for the ListView in ASP.NET
We can easily add empty row dynamically to ListView by using DataTable. In this article we discuss about how to add empty row dynamically.
First create DataTable and bind it to Listview. For each "Add New Row" button click, add new row to DataTable and bind it to ListView as shown below.
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ListViewAddRowsDynamically.WebForm1" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="listview1" runat="server">
<LayoutTemplate>
<table border="0px" cellpadding="1">
<tr style="background-color:#E5E5FE">
<th>firstname</th>
<th>lastname</th>
<th>company</th>
</tr>
<tr id="itemplaceholder" runat="server"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:TextBox ID="txtFName" Text='<%#Eval("FName") %>' runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txtLName" Text='<%#Eval("FName") %>' runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txtCompany" Text='<%#Eval("FName") %>' runat="server"></asp:TextBox></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="background-color:#EFEFEF">
<td><asp:TextBox ID="txtFName" Text='<%#Eval("FName") %>' runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txtLName" Text='<%#Eval("FName") %>' runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txtCompany" Text='<%#Eval("FName") %>' runat="server"></asp:TextBox></td>
</tr>
</AlternatingItemTemplate>
</asp:ListView><br /><br />
<asp:Button ID="btnAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click" />
</div>
</form>
</body>
</html>
WebForm1.aspx.cs
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ListViewAddRowsDynamically
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
FirstListViewRow();
}
}
private void FirstListViewRow()
{
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("FName", typeof(string)));
dt.Columns.Add(new DataColumn("LName", typeof(string)));
dt.Columns.Add(new DataColumn("Company", typeof(string)));
dr = dt.NewRow();
dt.Rows.Add(dr);
ViewState["CurrentTable"] = dt;
listview1.DataSource = dt;
listview1.DataBind();
}
private void AddNewRow()
{
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++)
{
TextBox TextBoxName = (TextBox)listview1.Items[rowIndex].FindControl("txtFName");
TextBox TextBoxAge = (TextBox)listview1.Items[rowIndex].FindControl("txtLName");
TextBox TextBoxAddress = (TextBox)listview1.Items[rowIndex].FindControl("txtCompany");
drCurrentRow = dtCurrentTable.NewRow();
dtCurrentTable.Rows[i - 1]["FName"] = TextBoxName.Text;
dtCurrentTable.Rows[i - 1]["LName"] = TextBoxAge.Text;
dtCurrentTable.Rows[i - 1]["Company"] = TextBoxAddress.Text;
rowIndex++;
}
dtCurrentTable.Rows.Add(drCurrentRow);
ViewState["CurrentTable"] = dtCurrentTable;
listview1.DataSource = dtCurrentTable;
listview1.DataBind();
TextBox txn = (TextBox)listview1.Items[rowIndex].FindControl("txtFName");
txn.Focus();
// txn.Focus;
}
}
else
{
Response.Write("ViewState is null");
}
}
protected void ButtonAdd_Click(object sender, EventArgs e)
{
AddNewRow();
}
}
}
As shown above we are storing the DataTable in ViewState.
