Resources » Code Snippets » ASP.NET GridView

How to get Grid view control cell value in ASP.NET?


Posted Date: 24-Jul-2011  Last Updated:   Category: ASP.NET GridView    
Author: Member Level: Diamond    Points: 10


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.


Did you like this resource? Share it with your friends and show your love!

Responses to "How to get Grid view control cell value in ASP.NET?"
Author: Shashwath77    02 Feb 2012Member 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 2012Member 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 2012Member Level: Diamond   Points : 0
Thanks pragash!


Guest Author: siva     05 Mar 2012
Thank YOU VERY MUCH . I got an idea about grid..


Guest Author: Ashish     18 Mar 2012
how to update these values by clicking update button inside the modal popup?


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 2012Member 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 2012Member 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.


Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    kush
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India