Get Count Number of Rows in ASPNet GridView using JavaScript

In this article I will explain with an example, how to get count (number) of rows in ASP.Net GridView using JavaScript.

This article will explain how to get the total count of the number of rows in ASP.Net GridView and also how to get the count of the number of all rows except the First (Header) row in ASP.Net GridView using JavaScript.

HTML Markup

The following HTML Markup consists of an ASP.Net GridView with three BoundField columns and a Button to get count (number) of rows in ASP.Net GridView using JavaScript.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

<asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />

<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />

<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />

</Columns>

</asp:GridView>

<br />

<asp:Button ID="btnGetCount" Text="Count Rows" runat="server" OnClientClick="return CountRows()" />

Namespaces

You will need to import the following namespace.

using System.Data;

VB.Net

Imports System.Data

Binding the ASP.Net GridView control

The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.

Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

DataTable dt = new DataTable();

dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });

dt.Rows.Add(1, "John Hammond", "United States");

dt.Rows.Add(2, "Mudassar Khan", "India");

dt.Rows.Add(3, "Suzanne Mathews", "France");

dt.Rows.Add(4, "Robert Schidner", "Russia");

GridView1.DataSource = dt;

GridView1.DataBind();

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not Me.IsPostBack Then

Dim dt As New DataTable()

dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})

dt.Rows.Add(1, "John Hammond", "United States")

dt.Rows.Add(2, "Mudassar Khan", "India")

dt.Rows.Add(3, "Suzanne Mathews", "France")

dt.Rows.Add(4, "Robert Schidner", "Russia")

GridView1.DataSource = dt

GridView1.DataBind()

End If

End Sub

Get Count (Number) of Rows in ASP.Net GridView using JavaScript

When the Button is clicked, the CountRows JavaScript function is executed. Inside the CountRows JavaScript function, first the ASP.Net GridView is referenced using JavaScript and then a loop is executed over the GridView rows (TR element).

Total count of the number of rows

The total count of the number of rows in ASP.Net GridView is calculated by counting all the HTML TR elements.

Count of the number of all rows except the First (Header) row

The count of the number of all rows except the First (Header) row in ASP.Net GridView is calculated by counting only those HTML TR elements which contain HTML TD (Cell) element and skipping all the HTML TR elements which contain HTML TH (Header Cell) element.

function CountRows() {

var totalRowCount = 0;

var rowCount = 0;

var gridView = document.getElementById("<%=GridView1.ClientID %>");

var rows = gridView.getElementsByTagName("tr")

for (var i = 0; i < rows.length; i++) {

totalRowCount++;

if (rows[i].getElementsByTagName("td").length > 0) {

rowCount++;

}

var message = "Total Row Count: " + totalRowCount;

message += "\nRow Count: " + rowCount;