Adding a row to gridview dynamically using javascript
In this post, I will show you how to add a row to aspx gridview control dynamically using javascript. As you know that when gridview renders its generate HTML that we can easily read and manipulate using javascript.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="GridViewNewRowJavascript.aspx.cs"
Inherits="GridViewNewRowJavascript" EnableEventValidation="False"%>
<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
function AddNewProfession()
{
var DropDownList
var txtBox
var NewtxtBox
var GridView
var NewDropDownList
var count=document.getElementById('<%=hdValue.ClientID %>').value;
DropDownList =document.getElementById("gvProfessions_ctl03_ddlProfessions");
txtBox =document.getElementById("gvProfessions_ctl02_txtBox");
GridView = document.getElementById('<%=gvProfessions.ClientID%>');
NewDropDownList = DropDownList.cloneNode(true);
NewtxtBox=txtBox.cloneNode(true);
NewtxtBox.id = "gvProfessions_ctl05_ddlProfessions";
NewtxtBox.name = "gvProfessions$ctl05$ddlProfessions";
NewDropDownList.id = "gvProfessions_ctl04_ddlProfessions";
NewDropDownList.name = "gvProfessions$ctl04$ddlProfessions";
var newGridViewRow = GridView.insertRow(GridView.rows.length);
var cellLeft = newGridViewRow.insertCell(0);
var cellRight=newGridViewRow.insertCell(1);
cellRight.appendChild(NewtxtBox);
cellLeft.appendChild(NewDropDownList);
count++;
document.getElementById('<%=hdValue.ClientID %>').value=count;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManger1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="u" runat="server">
<ContentTemplate>
<div>
<a href="#" onclick="return AddNewProfession()">Add new profession</a>
<asp:GridView ID="gvProfessions" runat="Server" AutoGenerateColumns="false"
OnRowDataBound="gvProfessions_RowDataBound"
EnableViewState="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddlProfessions" runat="server">
<asp:ListItem Text="A" Value="A"></asp:ListItem>
<asp:ListItem Text="B" Value="B"></asp:ListItem>
<asp:ListItem Text="C" Value="C">
</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:HiddenField ID="hdValue" runat="server" Value="2" />
<asp:Button ID="Button2" runat="server"
OnClick="Button2_Click" Text="Read GridView Value" />
<asp:Button ID="btnPost" runat="server"
OnClick="btnPost_Click" Text="RecreateGrid" /></div>
<asp:TextBox ID="txtValue"
runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
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 GridViewNewRowJavascript : System.Web.UI.Page
{
DataTable dtTest = new DataTable();
string strText = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
gvProfessions.DataSource = CreateDS();
gvProfessions.DataBind();
//Fetch Value From Hidden Field(it's store number of new row added)
//
int intNewRow = int.Parse(hdValue.Value);
if (intNewRow > 3)
{
ReBind();
}
}
protected void gvProfessions_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
}
}
private DataTable CreateDS()
{
DataTable dt = new DataTable("Company");
if (Session["DataList_ParentChild"] == null)
{
DataRow dr;
dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
for (int i = 1; i < 4; i++)
{
dr = dt.NewRow();
dr[0] = i;
dt.Rows.Add(dr);
}
Session["dsTemp"] = dt;
}
else
{
dt = (DataTable)Session["dsTemp"];
}
return dt;
}
public void ReBind()
{
DataRow dr;
int j = int.Parse(hdValue.Value);
DataTable dtTest = CreateDS() as DataTable;
for (int i = 3; i <= j; i++)
{
dr = dtTest.NewRow();
dr["ID"] = i;
dtTest.Rows.Add(dr);
Session["dsTemp"] = dtTest;
gvProfessions.DataSource = dtTest;
gvProfessions.DataBind();
}
}
protected void Button2_Click(object sender, EventArgs e)
{
foreach (GridViewRow gvRow in gvProfessions.Rows)
{
DropDownList ddl = gvRow.FindControl("ddlProfessions") as DropDownList;
strText += ddl.SelectedItem.Text;
}
txtValue.Text = strText+",";
}
protected void btnPost_Click(object sender, EventArgs e)
{
//as GridView will disappear if the page does a PostBack. You would need
//to persist them so that they could be added to the Grid's data source
//and then re-bind the Grid.So That i have used AJAX enabled Grid controls
}
}