Click here to Skip to main content
Click here to Skip to main content
Go to top

Letter/Alphanumeric Based Paging in ASP.NET

, 4 Feb 2003
Rate this:
Please Sign up or sign in to vote.
Explains one approach to adding letter-based paging to an ASP.NET datagrid control.
<!-- Download Links --> <!-- Article image -->

Sample Image - LetterBasedPaging.gif

<!-- Add the rest of your HTML here -->

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 a DataList. This will be used to render the data the user will be navigating. We must also have a Repeater 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.

<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 the DataBinding event gets fired.

Repeater Control

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

<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 ItemCommand event 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.

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 discussed rtpLetter control is bound to.

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

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.

// 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.

// 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.

// 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.

Revision History

4 February 2003: Original Article

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Joseph S. Keller
Web Developer
United States United States
Joseph S. Keller works at Advanced Business Technology as a lead developer for the most widely used Sports Assigning Software. Besides this hands experience he enjoys research in music composition. Joseph also improves his skills by writing technical articles and gaining certifications offered by Microsoft.

Comments and Discussions

 
Questionhow would you retain the row with gridview control? Pinmemberdsmportal4-Feb-11 10:01 
GeneralAJAX paging Pinmemberpetersummers8-Oct-09 3:03 
GeneralPerfect! Pinmemberalmightywizard20-Jul-09 8:23 
GeneralError Message PinmemberEthanDarkWarrior14-Feb-07 4:54 
GeneralDatagrid OnPageIndexChanged do not fire Pinmemberyan194543-Nov-05 4:39 
Generalnewbie kind of question Pinmemberrich@mortgagerates4less.com21-Feb-05 9:17 
GeneralRe: newbie kind of question Pinmembereashwar v7-May-08 1:03 
GeneralVB Version PinmemberJason Tepe3-Sep-04 4:48 
GeneralRe: VB Version Pinmembercvilla22-Sep-04 11:36 
GeneralRe: Another VB Version PinmemberHoochDEA15-Feb-06 15:56 
GeneralRe: Another VB Version Pinmemberyukijocelyn23-Aug-07 22:45 
GeneralRe: Another VB Version PinmemberMatt Penman18-Jul-08 3:43 
GeneralRe: Another VB Version PinmemberBrock Dandy29-Oct-08 5:56 
GeneralAlpha&quot;numeric&quot; but no numbers... PinsussBarney Powell10-Jun-04 0:18 
GeneralSessions Pinmembergdurzi@lrwonline.com23-Sep-03 9:39 
Generalalpha links PinmemberHoratiu CRISTEA15-Sep-03 22:38 
GeneralRe: alpha links PinmemberJoseph S. Keller21-Oct-03 14:15 
GeneralRe: alpha links PinsussAnonymous28-Feb-04 11:07 
GeneralRe: alpha links PinsussAnonymous29-Feb-04 7:54 
GeneralRe: alpha links PinmemberEthanDarkWarrior14-Feb-07 1:15 
GeneralRe: alpha links PinmemberEthanDarkWarrior14-Feb-07 1:16 
Generali do not agree Pinmemberjasmine2223-Jul-03 5:10 
GeneralRe: i do not agree PinmemberHoratiu CRISTEA15-Sep-03 21:59 
QuestionCan somone write this in VB.Net PinmemberManEFacezz20-Feb-03 5:36 
GeneralGreat idea! PinmemberGunmen5-Feb-03 23:08 
GeneralRe: Great idea! PinmemberJoseph Keller6-Feb-03 5:37 
GeneralRe: Great idea! Pinmemberwebtattoo8-Apr-03 7:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 5 Feb 2003
Article Copyright 2003 by Joseph S. Keller
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid