Click here to Skip to main content
15,867,749 members
Articles / Web Development / ASP.NET
Article

Letter/Alphanumeric Based Paging in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.71/5 (36 votes)
4 Feb 20033 min read 272.8K   4.4K   110   27
Explains one approach to adding letter-based paging to an ASP.NET datagrid control.

Sample Image - LetterBasedPaging.gif

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.

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

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

C#
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:

C#
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.

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

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

C#
// 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


Written By
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? Pin
dsmportal4-Feb-11 10:01
dsmportal4-Feb-11 10:01 
GeneralAJAX paging Pin
petersummers8-Oct-09 3:03
petersummers8-Oct-09 3:03 
GeneralPerfect! Pin
almightywizard20-Jul-09 8:23
almightywizard20-Jul-09 8:23 
GeneralError Message Pin
EthanDarkWarrior14-Feb-07 4:54
EthanDarkWarrior14-Feb-07 4:54 
GeneralDatagrid OnPageIndexChanged do not fire Pin
yan194543-Nov-05 4:39
yan194543-Nov-05 4:39 
Generalnewbie kind of question Pin
Member 169194021-Feb-05 9:17
Member 169194021-Feb-05 9:17 
GeneralRe: newbie kind of question Pin
eashwar v7-May-08 1:03
eashwar v7-May-08 1:03 
GeneralVB Version Pin
Member 13401493-Sep-04 4:48
Member 13401493-Sep-04 4:48 
GeneralRe: VB Version Pin
cvilla-AlianzaDev22-Sep-04 11:36
cvilla-AlianzaDev22-Sep-04 11:36 
GeneralRe: Another VB Version Pin
shawnsturm15-Feb-06 15:56
shawnsturm15-Feb-06 15:56 
GeneralRe: Another VB Version Pin
yukijocelyn23-Aug-07 22:45
yukijocelyn23-Aug-07 22:45 
GeneralRe: Another VB Version Pin
Matt Penman18-Jul-08 3:43
Matt Penman18-Jul-08 3:43 
GeneralRe: Another VB Version Pin
Brock Dandy29-Oct-08 5:56
Brock Dandy29-Oct-08 5:56 
GeneralAlpha&quot;numeric&quot; but no numbers... Pin
Member 116734210-Jun-04 0:18
Member 116734210-Jun-04 0:18 
GeneralSessions Pin
gdurzi@lrwonline.com23-Sep-03 9:39
gdurzi@lrwonline.com23-Sep-03 9:39 
Joseph,
I like this solution a lot. My only complaint is after I leave this page, I have two Sessions that are unused and sitting out there.
I'll try to implement the whole thing with viewstate, but I suspect it will be slower.
Generalalpha links Pin
Horatiu CRISTEA15-Sep-03 22:38
Horatiu CRISTEA15-Sep-03 22:38 
GeneralRe: alpha links Pin
Joseph S. Keller21-Oct-03 14:15
Joseph S. Keller21-Oct-03 14:15 
GeneralRe: alpha links Pin
Anonymous28-Feb-04 11:07
Anonymous28-Feb-04 11:07 
GeneralRe: alpha links Pin
Anonymous29-Feb-04 7:54
Anonymous29-Feb-04 7:54 
GeneralRe: alpha links Pin
EthanDarkWarrior14-Feb-07 1:15
EthanDarkWarrior14-Feb-07 1:15 
GeneralRe: alpha links Pin
EthanDarkWarrior14-Feb-07 1:16
EthanDarkWarrior14-Feb-07 1:16 
Generali do not agree Pin
jasmine2223-Jul-03 5:10
jasmine2223-Jul-03 5:10 
GeneralRe: i do not agree Pin
Horatiu CRISTEA15-Sep-03 21:59
Horatiu CRISTEA15-Sep-03 21:59 
QuestionCan somone write this in VB.Net Pin
ManEFacezz20-Feb-03 5:36
ManEFacezz20-Feb-03 5:36 
GeneralGreat idea! Pin
Gunmen5-Feb-03 23:08
Gunmen5-Feb-03 23:08 

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

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