Monday, February 22, 2010

How to read GridView row column data using javascript




Please visit my new Web Site WWW.Codedisplay.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:
javascript to read gridview

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:

n3xus said...

Thank you.

imran tareen said...

good my friend, i am looking for this

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash