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

Ouput


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)
  • Comments

    Author: Shashwath7702 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: Ravindran03 Feb 2012 Member Level: Diamond   Points : 0

    make sure you pass value to the method !!

    Guest Author: pragash22 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: Ravindran02 Mar 2012 Member Level: Diamond   Points : 0

    Thanks pragash!

    Guest Author: siva05 Mar 2012

    Thank YOU VERY MUCH . I got an idea about grid..

    Guest Author: Ashish18 Mar 2012

    how to update these values by clicking update button inside the modal popup?

    Guest Author: shahabzaheer27 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: suneel12 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: pradeep17 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 banerjee13 Feb 2013

    Thanks vai.

    Guest Author: Sajeena Shahulhameed04 Dec 2014

    Thank u

    Author: sonal12 Mar 2015 Member Level: Bronze   Points : 0

    how to retrieve value entered by the user from textbox which is inside gridview column plz help me