Here I am telling How can we bind Dynamic Grid Value by Instant Input control , Or we can say dynamically bind grid data.
Step 1:
1. First of all create DynamicGrid.aspx page . Inside that create three label fields EmpId, EmpName , Salary and create three text boxes regarding the fields.
2. Add two button one for Add Employee and second for Clear.
3. Below these buttons add a Gridview Control.
Below is the code Given for DynamicGrid.aspx.
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicGrid.aspx.cs" Inherits="DynamicGrid" %>
<!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>
<table align="left" border="1px" width="40%">
<tr>
<td valign="top" colspan="2" align="center" bgcolor="Aqua" >
<b>Dynamic Grid Binding Example<br />
</b></td>
</tr>
<tr>
<td valign="top" width="40%" align="center" bgcolor="Aqua" >
Emp Id</td>
<td width="60%">
<asp:TextBox ID="txtEmpid" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" bgcolor="Aqua" >
EmpName</td>
<td>
<asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" bgcolor="Aqua" >
Salary</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align ="center" bgcolor="Aqua">
<asp:Button ID="btnAdd" runat="server" Text="AddEmployee" onclick="btnAdd_Click" />
<asp:Button ID="btnClear" runat="server" Text="Clear" onclick="btnClear_Click" />
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="Aqua">
<b>Dynamic Grid</b></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="Aqua">
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" Width="67%" Style="text-align: left" BackColor="#99CCFF" >
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
[/html]
Step 2:
After page load we will get the output as below.
Step 3:
Now we implement logic in code behind page means ( DynamicGrid.aspx.cs )
1. First of all we add System.Data namespace.
2. On click of Add Employee button we create DataTable and save values to table’s columns.
3. Save DataTable state in Viewstate.
4. Bind GridView by this Dynamic DataTable.
So on every AddEmployee button click we check ViewState[“tb”] is null or not .
If it is null means no data available in DataTable.
Below is the DynamicGrid.aspx.cs page .
[csharp]
using System;
using System.Data;
public partial class DynamicGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnAdd_Click(object sender, EventArgs e)
{
DataTable dt = new DataTable("MyTable");
DataRow dr = null;
if (ViewState["tbl"] == null)
{
dt.Columns.Add(new DataColumn("EmpID", typeof(string)));
dt.Columns.Add(new DataColumn("EmpName", typeof(string)));
dt.Columns.Add(new DataColumn("Salary", typeof(double)));
dr = dt.NewRow();
dr["EmpId"] = txtEmpid.Text;
dr["EmpName"] = txtEmpName.Text;
dr["Salary"] = Convert.ToDouble(txtSalary.Text);
dt.Rows.Add(dr);
ViewState["tbl"] = dt;
GridView1.DataSource = dt;
GridView1.DataBind();
}
else
{
dt = ViewState["tbl"] as DataTable;
dr = dt.NewRow();
dr["EmpId"] = txtEmpid.Text;
dr["EmpName"] = txtEmpName.Text;
dr["Salary"] = Convert.ToDouble(txtSalary.Text);
dt.Rows.Add(dr);
ViewState["tbl"] = dt;
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void btnClear_Click(object sender, EventArgs e)
{
txtEmpid.Text = string.Empty;
txtEmpName.Text = string.Empty;
txtSalary.Text = "";
}
}
[/csharp]
Here is output :
Good article.
ReplyDeleteNice article for a fresher to programming world. but it has lost sense in today's world of JS. The technique is only helpful if one needs to save individual data or validate data on every record creation (primary key validation or some other complex ones). For display purposes, one should use JS to create dynamic rows and then on final save just paste the JSON data in an hidden input field. The server then reads the data and can deserialize it in the desired format to be consumed by your backend.
ReplyDelete