Subscribe
Please visit my new Web Site https://coderstechzone.com
In some cases we need to read GridView row column data using javascript specially for search purpose. Also there were lots of reason to read GridView data using javascript. If you can read gridview data from a javascript function then you can implement lot of eye catching interface for your client.
The below javascript function wiil read gridview contents or loop through gridview rows:
function Read_Data ()
{
var str='';
var Grid_Table = document.getElementById('<%= GridView1.ClientID %>');
for(var row=1; row<Grid_Table.rows.length; row++)
{
for(var col=0; col<Grid_Table.rows[row].cells.length; col++)
{
if(col==0)
if(document.all)
str=str+Grid_Table.rows[row].cells[col].innerText;
else
str=str+Grid_Table.rows[row].cells[col].textContent;
else
if(document.all)
str=str+'--'+Grid_Table.rows[row].cells[col].innerText;
else
str=str+'--'+Grid_Table.rows[row].cells[col].textContent;
}
str=str+'\n';
}
alert(str);
return false;
}
If you need to know the gridview row header name then start first loop from 0.For a complete example you can add an aspx page & copy the below html markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="javascript_GridView_Read.aspx.cs" Inherits="javascript_GridView_Read" %>
<!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>Read GridView Contents using javascript</title>
<script type="text/javascript">
function Read_Data ()
{
var str='';
var Grid_Table = document.getElementById('<%= GridView1.ClientID %>');
for(var row=1; row<Grid_Table.rows.length; row++)
{
for(var col=0; col<Grid_Table.rows[row].cells.length; col++)
{
if(col==0)
if(document.all)
str=str+Grid_Table.rows[row].cells[col].innerText;
else
str=str+Grid_Table.rows[row].cells[col].textContent;
else
if(document.all)
str=str+'--'+Grid_Table.rows[row].cells[col].innerText;
else
str=str+'--'+Grid_Table.rows[row].cells[col].textContent;
}
str=str+'\n';
}
alert(str);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Width="800px" AutoGenerateColumns="False" >
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="LightGray" />
<AlternatingRowStyle BackColor="LightGray" />
<Columns>
<asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
<asp:BoundField DataField="Category Name" HeaderText="Category Name" />
<asp:BoundField DataField="Product Name" HeaderText="Product Name" />
</Columns>
</asp:GridView>
<br />
<hr />
<br />
<asp:Button runat="server" ID="cmdRead" Text="Javascript to read gridview data" OnClientClick=" return Read_Data();" />
</div>
</form>
</body>
</html>
The serverside code is given below:using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class javascript_GridView_Read : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = clsDBUtility.GetDataTable("SELECT B.Name [Brand Name],C.Name [Category Name], " +
"P.Name [Product Name] FROM " +
"Brand B, Category C, Product P " +
"WHERE B.ID=P.BrandID AND C.ID=P.CategoryID Order BY 1,2,3");
GridView1.DataBind();
}
}
}
The output looks like:
Hope now you can read gridview content using javascript. Happy programming.
Script tested for:
1. Internet Explorer
2. Opera
3. Mozilla Firefox
4. Google Chrome
2 comments:
Thank you.
good my friend, i am looking for this
I WOULD BE DELIGHTED TO HEAR FROM YOU