How to Read GridView Row Column Data Records using Javascript

In some cases we need to read GridView row column data or records using javascript specially for client side search purpose. Also there were lots of reason to read GridView data records using javascript. If you can read GridView data from a javascript function then you can implement lot of things for user such as coloring special key words, formatting of data records, Padding, Manipulating etc.

The Example Output will be:

Javascript Function to Read GridView contents or loop through GridView Rows/Records:

<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++)
        return false;

Note: If you need to know the GridView row header name then start first loop from 0.

Now add a GridView & a Button Like Below:

    <asp:GridView ID="GridView1" runat="server" Width="600px" AutoGenerateColumns="False" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
         <RowStyle BackColor="LightGray" />
         <AlternatingRowStyle BackColor="LightGray" />
             <asp:BoundField DataField="ID" HeaderText="ID" />
             <asp:BoundField DataField="Title" HeaderText="Title" />
             <asp:BoundField DataField="Published" HeaderText="Published Date" />
        <hr />
       <asp:Button runat="server" ID="cmdRead" Text="Javascript to read gridview data" OnClientClick=" return Read_Data();" />

Now Bind Some Data to GridView under Page_load Event To Test Javascript Function:
C# Code:

        if (!IsPostBack)
            DataTable oTable = new DataTable("Article");

            oTable.Columns.Add(new DataColumn("ID", typeof(System.Int64)));
            oTable.Columns.Add(new DataColumn("Title", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Published", typeof(System.DateTime)));

            oTable.Rows.Add(1001, "DataTable Engineering", DateTime.Now);
            oTable.Rows.Add(1002, "Javascript Read GridView Row Data", DateTime.Now);
            oTable.Rows.Add(1003, "Javascript to read Gridview Records", DateTime.Now);
            oTable.Rows.Add(1004, "Retrieve GridView Data using Javascript", DateTime.Now);

            GridView1.DataSource = oTable;

Note: Don’t forget to add “using System.Data;” namespace.

VB.Net Code:

        If Not IsPostBack Then
            Dim oTable As DataTable = New DataTable("Article")

            oTable.Columns.Add(New DataColumn("ID", System.Type.GetType("System.Int64")))
            oTable.Columns.Add(New DataColumn("Title", System.Type.GetType("System.String")))
            oTable.Columns.Add(New DataColumn("Published", System.Type.GetType("System.DateTime")))

            oTable.Rows.Add(1001, "DataTable Engineering", DateTime.Now)
            oTable.Rows.Add(1002, "Javascript Read GridView Row Data", DateTime.Now)
            oTable.Rows.Add(1003, "Javascript to read Gridview Records", DateTime.Now)
            oTable.Rows.Add(1004, "Retrieve GridView Data using Javascript", DateTime.Now)

            GridView1.DataSource = oTable

        End If

Note: Don’t forget to add “Imports System.Data” namespace.

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

Download Code Example C#        Download Code Example VB.Net

Posted in .Net,, C#, Client, Gridview, Javascript, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *