Adding a row to gridview dynamically using javascript

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"
   Inherits="GridViewNewRowJavascript"  EnableEventValidation="False"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<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); = "gvProfessions_ctl05_ddlProfessions"; = "gvProfessions$ctl05$ddlProfessions"; = "gvProfessions_ctl04_ddlProfessions"; = "gvProfessions$ctl04$ddlProfessions";
var newGridViewRow = GridView.insertRow(GridView.rows.length);
var cellLeft = newGridViewRow.insertCell(0);
var cellRight=newGridViewRow.insertCell(1);
document.getElementById('<%=hdValue.ClientID %>').value=count;
return false;

   <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManger1" runat="server">
       <asp:UpdatePanel ID="u" runat="server">
     <a href="#" onclick="return AddNewProfession()">Add new profession</a>
                   <asp:GridView ID="gvProfessions" runat="Server" AutoGenerateColumns="false"
                              <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:TextBox ID="txtBox" runat="server"></asp:TextBox>
                   <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"
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();

        //Fetch Value From Hidden Field(it's store number of new row added)
        int intNewRow = int.Parse(hdValue.Value);

        if (intNewRow > 3)

    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;

            Session["dsTemp"] = dt;
            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;
            Session["dsTemp"] = dtTest;
            gvProfessions.DataSource = dtTest;

    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

Next Post Previous Post
No Comment
Add Comment
comment url