04:44
Unknown
Introduction
Get ASP.Net Grid View Row Value and its Row Index when clicked using JavaScript
Here I explained how to get the ASP.Net Grid View Row Value and its Row Index client side using JavaScript. He has also explained how we can find the Grid View Cells and the controls value inside the Grid View Template Fields client side using JavaScript.
Description
Below I have a simple ASP.Net Grid View. That content two columns SNo and Name both column are Template Fields.
When any gird View Cell is clicked, then Cell value and cell index value show on Alert box.
<%@ Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
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>Get ASP.Net Grid View Row Value and its Row Index when clicked using JavaScript title>
<style type="text/css">
table.hovertable
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertableth
{
background-color: #c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertabletr
{
background-color: #d4e3e5;
}
table.hovertabletd
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.style1
{
height: 400px;
width: 33%;
}
.style2
{
height: 200px;
width: 33%;
}
style>
<script type="text/javascript">
functionaddhiddenfieldValue(cellvalue,portvalue)
{
alert('You Click on Cell NO:'+cellvalue+' and Cell Value:'+portvalue);
}
script>
head>
<body>
<form id="form1" runat="server">
<div class="hovertable">
<asp:HiddenField ID="hdnfsplicvalue" runat="server" />
<table class="hovertable" align="center">
<tr>
<td valign="top" id="from" runat="server">
<asp:GridView runat="server" ID="GrdFrom" AutoGenerateColumns="false" Width="100%"
OnRowDataBound="GrdFrom_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="From"SortExpression="From">
<ItemTemplate>
<asp:Label ID="txtSNO" BorderWidth="0"BorderStyle="None"runat="server"Text='<%# Bind("SNO") %>'>asp:Label>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Name"SortExpression="Name">
<ItemTemplate>
<asp:Label ID="txtName"BorderWidth="0"BorderStyle="None"runat="server"Text='<%# Bind("Name") %>'>asp:Label>
ItemTemplate>
asp:TemplateField>
Columns>
asp:GridView>
td>
tr>
table>
div>
form>
body>
html>
using System;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(objectsender, EventArgs e)
{
if(!IsPostBack)
{
this.BindGridView();
}
}
private void BindGridView()
{
DataTable_dtData = new DataTable();
_dtData.Columns.Add("SNO");
_dtData.Columns.Add("Name");
_dtData.Rows.Add("1", "Sunil Gurjar");
_dtData.Rows.Add("2", "Prashant");
_dtData.Rows.Add("3", "anil Gurjar");
_dtData.Rows.Add("4", "Narendra Gurjar");
_dtData.Rows.Add("5", "Varun Gurjar");
GrdFrom.DataSource = _dtData;
GrdFrom.DataBind();
}
protected voidGrdFrom_RowDataBound(object sender, GridViewRowEventArgs e)
{
DataRowViewrow = e.Row.DataItem as DataRowView;
if(e.Row.RowType == DataControlRowType.DataRow)
{
Label cell1value = e.Row.Cells[0].FindControl("txtSNO") as Label;
Label cell3value = e.Row.Cells[1].FindControl("txtName") as Label;
e.Row.Cells[0].Attributes.Add("onclick", "addhiddenfieldValue('1','"+ cell1value.Text + "');");
e.Row.Cells[1].Attributes.Add("onclick", "addhiddenfieldValue('2','" + cell3value.Text + "');");
}
}
}
Downloads
You can download the complete source code in C#
