Here i have shown you the sample with dummy records. You can modify the Gridview records. I have done it through Jquery.Please run this sample.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Get GridView Cell Data</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id*=gvProducts] tr").mouseout(function (event) {
$(this).css("color", "black");
});
$("[id*=gvProducts] tr").mouseover(function (event) {
var ID = $(this).find("td:nth-child(1)").html();
$(this).css("color", "red");
var ProductName = $(this).find("td:nth-child(2)").html();
var Quantity = $(this).find("td:nth-child(3)").html();
var Price = $(this).find("td:nth-child(4)").html();
$("[id*=txtId]").val(ID);
$("[id*=txtProductName]").val(ProductName);
$("[id*=txtQuantity]").val(Quantity);
$("[id*=txtPrice]").val(Price);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
ID :
<asp:TextBox ID="txtId" runat="server" /><br />
ProductName :
<asp:TextBox ID="txtProductName" runat="server" /><br />
Quantity :
<asp:TextBox ID="txtQuantity" runat="server" /><br />
Price :
<asp:TextBox ID="txtPrice" runat="server" /><br />
</div>
<div>
<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" />
<asp:BoundField DataField="Price" HeaderText="Price" />
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
VB:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindGrid()
End If
End Sub
Private Sub BindGrid()
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(3) {New DataColumn("ID", GetType(Integer)), New DataColumn("ProductName", GetType(String)), New DataColumn("Quantity", GetType(Integer)), New DataColumn("Price", GetType(Integer))})
dt.Rows.Add(1, "Mouse", 10, 100)
dt.Rows.Add(2, "Speaker", 15, 990)
dt.Rows.Add(3, "Hard Drive", 35, 3990)
dt.Rows.Add(4, "Ram", 22, 399)
dt.Rows.Add(5, "Wireless Keyboard", 10, 3500)
dt.Rows.Add(6, "Wi-Fi Router", 62, 3050)
dt.Rows.Add(7, "LCD", 10, 100)
dt.Rows.Add(8, "Intel Processor", 10, 7000)
gvProducts.DataSource = dt
gvProducts.DataBind()
End Sub
Image:
This is the output i am getting and its running here. i think you are missing Jquery file. So i added this
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
Thank You.
