
Introduction
This article explains one approach to adding letter-based paging to an ASP.NET
DataGrid
control. This solution adds a set of LinkButton
s 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.
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.
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.
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