Letter/Alphanumeric Based Paging in ASP.NET

Introduction

This article explains one approach to adding letter-based paging to an ASP.NET DataGrid control. This solution adds a set of LinkButtons that correspond to the letters in the alphabet. When clicked, the DataGrid shows only records beginning with that letter. Navigation of large sets of data is greatly improved by using this method because fewer pages need be navigated to locate desired records.

For this example I have used the Northwind Database as the data source since it is commonly available and understood. Future articles will explain other methods used for navigating large amounts of data.

Requirements

For this solution to work, we must have a DataGrid control or other data-bound control like aDataList. This will be used to render the data the user will be navigating. We must also have aRepeater control that will render a LinkButton control for each letter in the alphabet.

DataGrid Control

You can configure the DataGrid however you like. Below is a very simple example.

Hide   Copy Code

<asp:datagrid id="dgCustomers" runat="server" width="100%" />

In this example, it is not necessary to hook-up any events to the DataGrid. We will bind the data to the grid when we are ready by manually calling the dgCustomers.DataBind() method. Personally, I like having control of when the DataGrid gets bound, instead of letting it happen when theDataBinding event gets fired.

Repeater Control

This control requires a bit more work and set up. This control is what will show the letters asLinkButton controls. In the .aspx file, the following tags are added.

Hide   Copy Code

<asp:repeater id="rptLetters" runat="server">
  <itemtemplate>
    <asp:linkbutton id="lnkLetter" runat="server" 
            commandname="Filter" 
            commandargument='<%# DataBinder.Eval(Container, "DataItem.Letter")%>'>
      <%# DataBinder.Eval(Container, "DataItem.Letter")%>
    </asp:linkbutton>
  </itemtemplate>
</asp:repeater>   

This renders LinkButton controls for every letter in the alphabet plus an "All" link that will show all records. When the letters are clicked, the web form posts back to the server and the ItemCommandevent is fired with the letter clicked as the CommandArgument.

We use this argument to set the DefaultView.RowFilter property for the table to which we will be binding the main DataGrid In this case the main DataGrid is dgCustomers.

The code that sets the row filter is as follows, where dt is the main DataTable we will be navigating, and _letterFilter is the letter that was clicked.

Hide   Copy Code

dt.DefaultView.RowFilter = "CompanyName LIKE '" + _letterFilter + "%'";

It is important to note details about the DataSource that this control is actually bound to. That will now be discussed.

Letters Data Source

Below describes in detail the process of creating a custom table that the previously discussedrtpLetter control is bound to.

First we create an array of what we want to add to our table:

Hide   Copy Code

string[] letters = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
                     "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
                     "W", "X", "Y", "Z", "All"};

Next we define the schema of the table that will contain the letters.

Hide   Copy Code

// Create the scheme of the table
dt.Columns.Add(new DataColumn("Letter",
  typeof(string)));

Now that we have a table, lets add all the items in the previously created letters array.

Hide   Copy Code

// Populate the data table with the letter data
for (int i = 0; i < letters.Length; i++) {
  DataRow dr = dt.NewRow();
  dr[0] = letters[i];
  dt.Rows.Add(dr);
}

Now all you have to do is set rptLetters.DataSource to the newly created table.

Hide   Copy Code

// Bind the data's default view to the grid
rptLetters.DataSource = dt.DefaultView;
rptLetters.DataBind();

In the sample code provided in the zip file there are many other little techniques for optimizing the performance of the web form, like caching certain information in the Session and ViewState. For brevity I have excluded those details from this article.

Conclusion

The purpose of this article was to provide you with the information needed to implement letter-based paging in ASP.NET data-bound controls. I have tried to keep it short and to the point. If there are important things that I missed, please let me know and I will update this article.