Auto Generate Row Number in GridView

The GridView control, as the successor to the DataGrid, offers several enhancements and extended capabilities. While developing GridView controls in ASP.NET, programmers frequently encounter the need to display row numbers within the GridView.

Gridview row index number

Displaying row numbers in a GridView can provide valuable information and improve the user experience. It allows users to easily track and reference specific rows within the GridView, facilitating navigation and data comprehension.

To accomplish this, programmers can utilize various techniques. One common approach is to use the RowDataBound event of the GridView control. Within this event handler, the programmer can access each row of the GridView and assign a unique row number value based on the current row's index or position within the GridView.

row-number in gridview

Displaying row numbers in a GridView enhances the usability and clarity of the displayed data. It provides users with a convenient reference point, enabling them to identify and interact with specific rows more effectively. Programmers can implement this feature easily within the ASP.NET GridView control, enhancing the overall functionality and user experience.


In this article I have used Microsoft's Pubs database for sample data. You can download it free from the following link.


Auto Generate Row Number in GridView

It is a common requirement that GridViews to have the first column just be a number identifying the row. Because of doing this implementation, the user can see the number of rows returned by scrolling to the end of the GridView. By adding a single piece of code you can add a row number column to your GridView Control.

row-index in gridview

The following source code show how to create a row number column field to your Asp.Net GridView

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="#BFE4FF" /> <Columns> <asp:TemplateField HeaderText="No."> <ItemTemplate> <%# Container.DataItemIndex + 1 %> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="pub_id" HeaderText="pub_id" /> <asp:BoundField DataField="pub_name" HeaderText="pub_name" /> <asp:BoundField DataField="city" HeaderText="city" /> <asp:BoundField DataField="state" HeaderText="state" /> <asp:BoundField DataField="country" HeaderText="country" /> </Columns> </asp:GridView> </div> </form> </body> </html>
C# Source Code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { SqlDataAdapter adapter = new SqlDataAdapter(); DataSet ds = new DataSet(); int i = 0; string sql = null; string connetionString = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412"; sql = "select * from publishers"; SqlConnection connection = new SqlConnection(connetionString); connection.Open(); SqlCommand command = new SqlCommand(sql, connection); adapter.SelectCommand = command; adapter.Fill(ds); adapter.Dispose(); command.Dispose(); connection.Close(); GridView1.DataSource = ds.Tables[0]; GridView1.DataBind(); } }
VB.Net Source Code
Imports System.Drawing Imports System.Data.SqlClient Imports System.Data Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim adapter As New SqlDataAdapter() Dim ds As New DataSet() Dim i As Integer = 0 Dim sql As String = Nothing Dim connetionString As String = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412" sql = "select * from publishers" Dim connection As New SqlConnection(connetionString) connection.Open() Dim command As New SqlCommand(sql, connection) adapter.SelectCommand = command adapter.Fill(ds) adapter.Dispose() command.Dispose() connection.Close() GridView1.DataSource = ds.Tables(0) GridView1.DataBind() End Sub End Class