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.hovertable
th
{
background-color:
#c3dde0;
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#a9c6c9;
}
table.hovertable
tr
{
background-color:
#d4e3e5;
}
table.hovertable
td
{
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">
function
addhiddenfieldValue(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;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object
sender, 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 void
GrdFrom_RowDataBound(object sender, GridViewRowEventArgs e)
{
DataRowView
row = 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#
No comments :
Post a Comment