.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Forum >> ASP.Net >> Post New QuestionBookmark and Share Subscribe to Forum

Javascript to Add new row in Gridview

Posted By: Sasi Prabhu     Posted Date: March 29, 2012    Points:5   Category :ASP.Net
I need to insert a new row into gridview in javascript.

Responses
Author: Mahesh             
Posted Date: March 29, 2012     Points: 20   

Hi,
Follow the code below..

Create new gridview row with 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


}
}

Hope this helps...

Regards,
Mahesh



Post Reply

You must Sign In To post reply
 
 
Find more Forum Questions on C#, ASP.Net, Vb.Net, SQL Server and more Here
Quick Links For Forum Categories:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  OOPs  SilverlightIISJQuery
JavaScript/VBScriptBiztalkWPFPatten/PracticesWCFOthers
www.DotNetSpark.comUnAnsweredAll

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend