How to get Grid view control cell value in ASP.NET?
In this article I have explained get Gridview cell values using Template field Label control or Bound field. For example we have bind record details in the Grid View control, if users click the view details link button in the grid view we need to show the details in popup window without calling Database again. This can be possible using get grid view cell values.
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.
Hello Ravindran
I am getting exception what could be the problem
Microsoft JScript runtime error: Object expected