Description
Here we are bind data in the grid view control. After bind if we need record details in textbox, we can use either retrieve data from database again using data key name or retrieve data from grid view cells. If we get data again from database is take time again open connection retrieve and return etc. it is slow process compare to retrieve data from grid view cells. So In this example code I have retrieve grid view cell values and bind it in the pop up text box without calling database again.
Here I have get values from grid view in two ways
1) Get Gridview cell values using Template field
2) Get Gridview cell values using Bound Field
Get Gridview cell values using Template field
Client side:
In this code snippet I have used Template field, bind the data from database in the Template field Label Control and retrieve Label control value bind it in the textbox control.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Grid View Cell Value Retrieve using Template Field</title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup
{
background-color:#ffffff;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.btn
{
background-color: #033280;
color: White;
font-size: 12px;
font-weight: bold;
padding-left: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<div align="center">
<cc1:toolkitscriptmanager runat="server"></cc1:toolkitscriptmanager>
<asp:GridView ID="GridView1" runat="server" DataKeyNames="eno" AutoGenerateColumns="false" onpageindexchanging="GridView1_PageIndexChanging" PageSize="5"
AllowPaging="true" onrowcommand="GridView1_RowCommand">
<Columns>
<%--Bind Employee Number in Grid view first column--%>
<asp:TemplateField HeaderText="Employee no">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("eno")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%--Bind Employee Name in Grid view second column--%>
<asp:TemplateField HeaderText="Emp name">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%#Eval("empname")%> '></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtempname" runat="server" Text='<%#Bind("empname")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<%--Bind Employee Salary in Grid view thrid column--%>
<asp:TemplateField HeaderText="Salary">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%#Eval("sal")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtsal" runat="server" Text='<%#Bind("sal")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<%--View Details column with link button--%>
<asp:TemplateField HeaderText="Details">
<ItemTemplate>
<asp:LinkButton ID="lnkDet" CommandName="cmdBind" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" runat="server" CausesValidation="false">View Details</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%--POP UP control Text boxes and details--%>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="PnlModal" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="Button" style="visibility:hidden"/>
<asp:Panel ID="PnlModal" runat="server" Width="500px" CssClass="modalPopup">
<table width="500" align="center">
<tr>
<td colspan="2" align="left" height="40"><b>Selected Record Details</b></td>
</tr>
<tr>
<td width="50%" align="left" height="30">Employee No:</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server" TabIndex="1" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td width="50%" align="left" height="30">Employee Name</td>
<td align="left">
<asp:TextBox ID="TextBox2" runat="server" TabIndex="2" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td width="50%" align="left" height="30">Salary</td>
<td align="left">
<asp:TextBox ID="TextBox3" runat="server" TabIndex="1" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center" height="30">
<asp:Button ID="Button2" runat="server" Text="Close" CssClass="btn" />
</td>
</tr>
</table>
</asp:Panel>
<br/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Server side
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
SqlCommand sqlcmd;
SqlDataAdapter da;
DataTable dt = new DataTable();
DataTable dt1 = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridData();
}
}
void GridData()
{
sqlcmd = new SqlCommand("select * from emp", sqlcon);
sqlcon.Open();
da = new SqlDataAdapter(sqlcmd);
dt.Clear();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
GridData();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridData();
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "cmdBind")
{
LinkButton lb = (LinkButton)e.CommandSource;
int index = Convert.ToInt32(lb.CommandArgument);
GridViewRow row = GridView1.Rows[index];
//Get each Column label value from grid view and store it in label
Label l1 = (Label)row.FindControl("Label1");
Label l2 = (Label)row.FindControl("Label2");
Label l3 = (Label)row.FindControl("Label3");
//Bind values in the text box of the pop up control
TextBox1.Text = l1.Text;
TextBox2.Text = l2.Text;
TextBox3.Text = l3.Text;
ModalPopupExtender1.Show();
}
}
}
Get Gridview cell values using Bound Field
Client side:
In this code snippet I have bind the data from database directly to the Bound Field and retrieve grid view cell values bind it in textbox control.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Grid View Cell Value Retrieve using Bound Field</title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup
{
background-color:#ffffff;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.btn
{
background-color: #033280;
color: White;
font-size: 12px;
font-weight: bold;
padding-left: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<cc1:toolkitscriptmanager ID="Toolkitscriptmanager1" runat="server"></cc1:toolkitscriptmanager>
<div align="center">
<asp:GridView ID="GridView1" runat="server" DataKeyNames="eno" AutoGenerateColumns="false" onpageindexchanging="GridView1_PageIndexChanging" PageSize="5"
AllowPaging="true" onrowcommand="GridView1_RowCommand">
<Columns>
<%--Bind Employee Number in Grid view first column--%>
<asp:BoundField DataField="eno" HeaderText="Employee No." />
<%--Bind Employee Name in Grid view second column--%>
<asp:BoundField DataField="empname" HeaderText="Employee Name" />
<%--Bind Employee Salary in Grid view thrid column--%>
<asp:BoundField DataField="sal" HeaderText="Salary" />
<%--View Details column with link button--%>
<asp:TemplateField HeaderText="Details">
<ItemTemplate>
<asp:LinkButton ID="lnkDet" CommandName="cmdBind" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" runat="server" CausesValidation="false">View Details</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%--POP UP control Text boxes and details--%>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="PnlModal" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="Button" style="visibility:hidden"/>
<asp:Panel ID="PnlModal" runat="server" Width="500px" CssClass="modalPopup">
<table width="500" align="center">
<tr>
<td colspan="2" align="left" height="40"><b>Selected Record Details</b></td>
</tr>
<tr>
<td width="50%" align="left" height="30">Employee No:</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server" TabIndex="1" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td width="50%" align="left" height="30">Employee Name</td>
<td align="left">
<asp:TextBox ID="TextBox2" runat="server" TabIndex="2" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td width="50%" align="left" height="30">Salary</td>
<td align="left">
<asp:TextBox ID="TextBox3" runat="server" TabIndex="1" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center" height="30">
<asp:Button ID="Button2" runat="server" Text="Close" CssClass="btn" onclick="Button2_Click" /></td>
</tr>
</table>
</asp:Panel>
<br />
</div>
</form>
</body>
</html>
Server side
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
SqlCommand sqlcmd;
SqlDataAdapter da;
DataTable dt = new DataTable();
DataTable dt1 = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridData();
}
}
void GridData()
{
sqlcmd = new SqlCommand("select * from emp", sqlcon);
sqlcon.Open();
da = new SqlDataAdapter(sqlcmd);
dt.Clear();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridData();
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "cmdBind")
{
LinkButton lb = (LinkButton)e.CommandSource;
int index = Convert.ToInt32(lb.CommandArgument);
//Bind values in the text box of the pop up control
TextBox1.Text = GridView1.Rows[index].Cells[0].Text;
TextBox2.Text = GridView1.Rows[index].Cells[1].Text;
TextBox3.Text = GridView1.Rows[index].Cells[2].Text;
ModalPopupExtender1.Show();
}
}
protected void Button2_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Hide();
}
}
Output:
Output of the above two code look like below screen
Source code:
I have attached two types of source code like above code.
1) Retrieve grid cell values using Template field
2) Retrieve grid cell values using Bound field
Download it and try to get grid view cell values.
Front End: ASP.NET
Code Behind: C#
Conclusion:
I hope this article is help to know about retrieve grid view cell values in ASP.NET.
 Attachments
TemplateField_cellvalue (43119-2403-GridViewCellvalue_TemplateField.rar)BoundField_cellvalue (43119-2405-GridViewCellvalue_BoundField.rar)
|
| Author: Shashwath77 02 Feb 2012 | Member Level: Gold Points : 0 |
Hello Ravindran
I am getting exception what could be the problem
Microsoft JScript runtime error: Object expected
|
| Author: Ravindran 03 Feb 2012 | Member Level: Diamond Points : 0 |
make sure you pass value to the method !!
|
| Guest Author: pragash 22 Feb 2012 |
Its great. Really Excellent man, Please keep it up. Thank you very much for this article. It covers overall idea about grid. Really Thank you:-)
|
| Author: Ravindran 02 Mar 2012 | Member Level: Diamond Points : 0 |
Thanks pragash!
|
| Guest Author: shahabzaheer 27 Apr 2012 |
Good and helpful.. a question is that is it possible to stay form up after click the button on modal popup window. thanks
|
| Author: suneel 12 Sep 2012 | Member Level: Silver Points : 0 |
Hi Ravindran ,
you used these tagas in model popup. what is use of below tag
Drag="true" PopupDragHandleControlID="PopupHeader"
|
| Author: pradeep 17 Oct 2012 | Member Level: Bronze Points : 2 |
I spent two days searching for this solution. It works thanks.
I have another task.
Now when you are moving one row at a time from gridview1 to gridview2, how to add rows in gridview2 ( how to add rows in gridview2 one below the existing row??)
I am working on a shopping cart application.
when shopper selects a product in Gridview 1, it should be added to gridview2 and second product should be added below the first row in gridview2.
Appreciate your help.
Thanks
Deep
|
| Guest Author: sumon banerjee 13 Feb 2013 |
Thanks vai.
|