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"
 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
       

    }
}

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru