In this article I will explain with an example, how to implement Alphabet Paging in ASP.Net GridView using C# and VB.Net.
Alphabet Paging or Alphabetical Paging is not actually Pagination but it filters the records of the GridView based on the selected Alphabet. For example, if letter M is selected, the GridView records will be filtered to records starting with letter M.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView for which Alphabet Paging will be implemented and a Repeater control to populate the List of Alphabets.
GridView
The GridView has been set to use Pagination by setting the AllowPaging property to True and the OnPageIndexChanging event has been specified.
Also in the GridView, an EmptyDataTemplate has been added and inside the EmptyDataTemplate, an HTML Table has been placed to display the ‘No records found’ message.
Note: If you need to know more about how to display the empty GridView when no records present in the GridView then refer my article Display GridView with Empty Message and Header and Footer when no data in ASP.Net.
 
Repeater
Inside the Repeater control’s ItemTemplate there is a LinkButton and a Label control. The LinkButton is displayed for non-selected Alphabets while the Label is displayed for selected Alphabets.
The LinkButton has been assigned with an OnClick event handler.
C#
<div class="AlphabetPager">
    <asp:Repeater ID="rptAlphabets" runat="server">
        <ItemTemplate>
            <asp:LinkButton runat="server" Text='<%#Eval("Value")%>' Visible='<%# !Convert.ToBoolean(Eval("Selected"))%>'
                OnClick="Alphabet_Click" />
            <asp:Label runat="server" Text='<%#Eval("Value")%>' Visible='<%# Convert.ToBoolean(Eval("Selected"))%>' />
        </ItemTemplate>
    </asp:Repeater>
</div>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" PageSize="5"
    AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" HeaderStyle-Width="150px" />
        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" HeaderStyle-Width="150px" />
        <asp:BoundField DataField="City" HeaderText="City" HeaderStyle-Width="100px" />
        <asp:BoundField DataField="Country" HeaderText="Country" HeaderStyle-Width="100px" />
        <asp:BoundField DataField="PostalCode" HeaderText="Postal Code" HeaderStyle-Width="100px" />
    </Columns>
    <EmptyDataTemplate>
        <table cellspacing="0" rules="all" border="0" style="border-collapse: collapse;">
            <tr>
                <th scope="col" style="width: 150px;">
                    Contact Name
                </th>
                <th scope="col" style="width: 150px;">
                    Company Name
                </th>
                <th scope="col" style="width: 100px;">
                    City
                </th>
                <th scope="col" style="width: 100px;">
                    Country
                </th>
                <th scope="col" style="width: 100px;">
                    Postal Code
                </th>
            </tr>
           <tr>
                <td colspan="99" align="center">
                    No records found for the search criteria.
                </td>
            </tr>
        </table>
    </EmptyDataTemplate>
</asp:GridView>
 
VB.Net
<div class="AlphabetPager">
    <asp:Repeater ID="rptAlphabets" runat="server">
        <ItemTemplate>
            <asp:LinkButton runat="server" Text='<%#Eval("Value")%>' Visible='<%# Not Convert.ToBoolean(Eval("Selected"))%>'
                OnClick="Alphabet_Click" />
            <asp:Label runat="server" Text='<%#Eval("Value")%>' Visible='<%# Convert.ToBoolean(Eval("Selected"))%>' />
        </ItemTemplate>
    </asp:Repeater>
</div>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" PageSize="5"
    AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" HeaderStyle-Width="150px" />
        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" HeaderStyle-Width="150px" />
        <asp:BoundField DataField="City" HeaderText="City" HeaderStyle-Width="100px" />
        <asp:BoundField DataField="Country" HeaderText="Country" HeaderStyle-Width="100px" />
        <asp:BoundField DataField="PostalCode" HeaderText="Postal Code" HeaderStyle-Width="100px" />
    </Columns>
    <EmptyDataTemplate>
        <table cellspacing="0" rules="all" border="0" style="border-collapse: collapse;">
            <tr>
                <th scope="col" style="width: 150px;">
                    Contact Name
                </th>
                <th scope="col" style="width: 150px;">
                    Company Name
                </th>
                <th scope="col" style="width: 100px;">
                    City
                </th>
                <th scope="col" style="width: 100px;">
                    Country
                </th>
                <th scope="col" style="width: 100px;">
                    Postal Code
                </th>
            </tr>
            <tr>
                <td colspan="99" align="center">
                    No records found for the search criteria.
                </td>
            </tr>
        </table>
    </EmptyDataTemplate>
</asp:GridView>
 
 
CSS styles for the Repeater and the GridView controls
Following the CSS styles which will be used for the Repeater and the GridView controls.
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    table
    {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }
    table th
    {
        background-color: #F7F7F7;
        color: #333;
        font-weight: bold;
    }
    table th, table td
    {
        padding: 5px;
        border: 1px solid #ccc;
    }
    table, table table td
    {
        border: 0px solid #ccc;
    }
    .AlphabetPager a, .AlphabetPager span
    {
        display: inline-block;
        height: 15px;
        line-height: 15px;
        min-width: 15px;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        padding: 0 1px 0 1px;
    }
    .AlphabetPager a
    {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #969696;
    }
    .AlphabetPager span
    {
        background-color: #aaa;
        color: #fff;
        border: 1px solid #000;
    }
</style>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Collections.Generic
 
 
Populating the GridView and the Alphabet Pager in Repeater
Inside the Page Load event, the GridView is populated with records from the Customers Table of the Northwind Database and the Repeater control is populated with Alphabets (A-Z).
A ViewState object is used to store the Current Selected Alphabet and its default value is set to ALL.
Note: During PostBacks occurring due to GridView Pagination, the selected Alphabet value will be lost hence a ViewState object is used to store the selected Alphabet value.
 
GridView
Inside the BindGrid method, the selected Alphabet from the ViewState is passed to the SQL Query as parameter and the results are populated inside a DataTable which is later used to populate the GridView.
If the value in the ViewState object is ALL then all records are displayed and if any alphabet value, then the SQL Query filters the records as per the selected Alphabet.
 
Repeater
Inside the GenerateAlphabets method, a Generic List of ListItem class is used to populate Alphabets from A-Z using FOR Loop.
Finally, the Generic List of ListItem class is used to populate the Repeater control.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        ViewState["CurrentAlphabet"] = "ALL";
        this.GenerateAlphabets();
        this.BindGrid();
    }
}
 
private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers WHERE ContactName LIKE @Alphabet + '%' OR @Alphabet = 'ALL'"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@Alphabet", ViewState["CurrentAlphabet"]);
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
        }
    }
}
 
private void GenerateAlphabets()
{
    List<ListItem> alphabets = new List<ListItem>();
    ListItem alphabet = new ListItem();
    alphabet.Value = "ALL";
    alphabet.Selected = alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
    alphabets.Add(alphabet);
    for (int i = 65; i <= 90; i++)
    {
        alphabet = new ListItem();
        alphabet.Value = Char.ConvertFromUtf32(i);
        alphabet.Selected = alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
        alphabets.Add(alphabet);
    }
    rptAlphabets.DataSource = alphabets;
    rptAlphabets.DataBind();
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        ViewState("CurrentAlphabet") = "ALL"
        Me.GenerateAlphabets()
        Me.BindGrid()
    End If
End Sub
 
Private Sub BindGrid()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand("SELECT * FROM Customers WHERE ContactName LIKE @Alphabet + '%' OR @Alphabet = 'ALL'")
            Using sda As New SqlDataAdapter()
                cmd.Connection = con
                cmd.Parameters.AddWithValue("@Alphabet", ViewState("CurrentAlphabet"))
                sda.SelectCommand = cmd
                Using dt As New DataTable()
                    sda.Fill(dt)
                    GridView1.DataSource = dt
                    GridView1.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub
 
Private Sub GenerateAlphabets()
    Dim alphabets As New List(Of ListItem)()
    Dim alphabet As New ListItem()
    alphabet.Value = "ALL"
    alphabet.Selected = alphabet.Value.Equals(ViewState("CurrentAlphabet"))
    alphabets.Add(alphabet)
    For i As Integer = 65 To 90
        alphabet = New ListItem()
        alphabet.Value = [Char].ConvertFromUtf32(i)
        alphabet.Selected = alphabet.Value.Equals(ViewState("CurrentAlphabet"))
        alphabets.Add(alphabet)
    Next
    rptAlphabets.DataSource = alphabets
    rptAlphabets.DataBind()
End Sub
 
 
Implement Paging in GridView
The OnPageIndexChanging event handles the Pagination in the GridView.
Inside the OnPageIndexChanging event handler, the GridView’s PageIndex property is updated and the GridView is again populated from Database by making call to the BindGrid method.
C#
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    this.BindGrid();
}
 
VB.Net
Protected Sub OnPageIndexChanging(sender As Object, e As GridViewPageEventArgs)
    GridView1.PageIndex = e.NewPageIndex
    Me.BindGrid()
End Sub
 
 
Handling the Alphabet Click event inside the Repeater control
When a LinkButton is clicked inside the Repeater control, the clicked LinkButton is referenced and value of the Alphabet is read from its Text property.
Then the selected Alphabet is stored in the ViewState object and then the GenerateAlphabets and the BindGrid methods are called in order to refresh the Repeater and the GridView controls respectively.
C#
protected void Alphabet_Click(object sender, EventArgs e)
{
    LinkButton lnkAlphabet = (LinkButton)sender;
    ViewState["CurrentAlphabet"] = lnkAlphabet.Text;
    this.GenerateAlphabets();
    GridView1.PageIndex = 0;
    this.BindGrid();
}
 
VB.Net
Protected Sub Alphabet_Click(sender As Object, e As EventArgs)
    Dim lnkAlphabet As LinkButton = DirectCast(sender, LinkButton)
    ViewState("CurrentAlphabet") = lnkAlphabet.Text
    Me.GenerateAlphabets()
    GridView1.PageIndex = 0
    Me.BindGrid()
End Sub
 
 
Screenshot
Alphabet Paging using Alphabetical Pager in ASP.Net GridView
 
 
Demo
View Demo
 
 
Downloads