Introduction

While working on a project, I realized the need to use the DataList control to present my content data in a list of records format. However the problem encountered while dealing with large number of data records, the user has to wait until all the data is retrieved from the database and bound to the DataList. Of course I could have used the DataGrid control because it already implements inbuilt paging, however I did not require all the other features that it supports other then that, I also wanted to have some control over the displayed HTML and therefore it was time to build my own paging mechanism with the DataList control.

I am sure that you are familiar with the DataList control, if not I recommend you to check the below link for more information.

http://www.w3schools.com/aspnet/aspnet_datalist.asp

Here are the steps that we will perform throughout this demonstration.

1. Create a user control and the specified UI
2. Write the server side code to implement the needed functionality

HTML Code

In the user control, we will create two panels which will serve as containers for the DataList and the navigation toolbar. The below code shows the HTML for our containers.

Two images have been used (Next and Previous) which can be found in the attached download zip file.

Code Behind

In this section, we will write the necessary code to implement our logic. First we will setup the database connection, retrieve our data, filter them based on specific criteria, and then bind it to the control.

Below are the main events and methods we will use:

1. The page_load event used to open a database connection, fill the DataSet which will be saved into a session variable to increase the performance and minimize the need for an opened connection while users are navigating through the control.
2. We will handle two onclick events for the next and previous ImageButtons. The events are called GoNext and GoPrevious.
3. The following helper functions are created: BindDatalist, FillDataSet, BindAndSetPage, and SetNext/.
4. A public string property RowsNumber in which we will allow the developer to specify how many records to display per page.

The Page Load Event:

In the code above, we will check if the session variable containing the DataSet is null, we will open the database connection, fetch our data and store them in a DataSet object through the FillDataSet function which will be saved into a session variable, and then call the BindDataList function.

FillDataSet Function

FillDataSet Method

The code above is responsible for filtering data to show specified records in the DataList control. We used the DataView object to filter records based on the ID column in the database, Calculated the number of pages, then calling the SetNext method which is used to retrieve the next two ids to be saved inside a hidden Label control. Of course, the JavaScript code is injected to the form to show or hide the images; finally we bind the DataList to the DataView object.

BindAndSetPage Function

Figure 1

You should see a similar screenshot as above, when the datalist control is first loaded.

SetNext Function

The above method is used to save the next records ID into a label control. The values are then used each time the user presses the Next or Previous link to keep track on which records to display on each event.

GoNext Event

The GoNext event is used to handle the Next image click event. In the above code, we will retrieve the values from the label control, filter the DataView object based on these values, set the previous and next records id and then bind it to the DataList control.

GoPrevious Event

The above code is being executed when the previous image is clicked. It is similar to the GoNext functionality however to retrieve previous records. We are retrieving the values of the previous records from a hidden label.

Figure 2

The above figure will show how the DataList control will look when the user clicked on the next image. You may have realized that the next image now is hidden because there are no records to navigate.

The RowsNumber Property

The above property is used to enable the developer to specify how many records he/she wants to display per page.

The main advantage of this user control is to give the developer the option to specify how many records he/she wants to display per page. This can be achieved by setting the RowsNumber property.

Conclusion

After completing the demonstration, you will have a better understanding on how to implement custom paging with a DataList control. It has been developed as a user control to include it into future projects. The page and injected JavaScript files has been tested on IE7 and Mozilla Firefox 2.0.

Download

Paging Project

About Haissam Abdul Malak

Haissam Abdul Malak works as senior software developer in CCC. He has been developing web application using ASP.NET technology over the last 3 years. He achieved the Microsoft Certified Application Developer [MCAD] and been certified since 2006. He is a regular contributor on the ASP.NET official f... This author has published 3 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Cool!	Rami Al-Zawahri	5/6/2007 3:19 PM
very cool! but why you didn't use ViewState to store PageNumber, isn't it better than Session? Reply | Permanent link

---

Please login to rate or to leave a comment.