TomBecker.net

Creating a custom pager using Delegates

I wanted to create a way to handle the paging event of a gridview or datagrid with a few special requirements, I wanted to be able to

1. change the page size,
2. have previous, next, first and last buttons, and
3. jump to a specific page.

The inbuilt paging option in the gridview does not allow you to do all of this. And instead of writing this for each grid that I wanted to use it in I created a user control, that does everything for you.

I will save you the details of the most of the code, but will point out the interesting bits, you can download a working example at the end of the post.

First the delegates. The user control has two delegates defined one to change the page (PageChangedEventHandler) and one to handle the page size changing (ItemsPerPageChangedEventHandler). Notice that in the definition of the delegates I have a custom eventArg class that has a few extra properties that I am going use.

Public Delegate Sub PageChangedEventHandler(ByVal sender As Object, ByVal e As DataNavigatorEventArgs)

Public Delegate Sub ItemsPerPageChangedEventHandler(ByVal sender As Object, ByVal e As DataNavigatorEventArgs)

Both Delegates have an event associated with them:

Public Event PageChanged As PageChangedEventHandler
Public Event CountChanged As ItemsPerPageChangedEventHandler

The user control has 3 properties that we will need to use on the page where you are using the user control. And of course all the button clicks where the magic happens. When the user clicks a button, changes page size, or jumps to a page, we raise the corresponding event, below is the example from clicking the 'first' button.

 Private Sub btnFirst_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnFirst.Click
     Dim myE As New DataNavigatorEventArgs

     _Current_Page = 0

     myE.CurrentPage = _Current_Page
     myE.TotalPages = _Page_count

     ViewState("CurrentPage") = _Current_Page
     ViewState("PageCount") = _Page_count

     RaiseEvent PageChanged(sender, myE)
End Sub

The rest of the button clicks look pretty much the same just the logic of setting the current page is different.

So that is pretty much it for the user control.

In order to use it, you can just drag it on your page and in the code behind make sure you catch both events, example below.

Public Sub Paging(ByVal sender As Object, ByVal e As DataNavigatorEventArgs) Handles myPager.PageChanged
     Me.grdTest.PageIndex = e.CurrentPage
     'rebind grid
End Sub

Public Sub CountChanged(ByVal sender As Object, ByVal e As DataNavigatorEventArgs) Handles myPager.CountChanged
     Me.grdTest.PageSize = e.ItemsPerPage
     Me.grdTest.PageIndex = e.CurrentPage
     'rebind grid
End Sub

Since this bit of code is essentially the same you can just copy paste between the pages and change variables names as needed.

Only one other bit of code on the aspx page and you are set. And this goes where you are binding the grid. You must tell the pager control who many items there are and what the current page is.

Me.grdTest.DataSource = dt
Me.grdTest.DataBind()

Dim itemCount As Integer = dt.Rows.Count
Me.myPager.ItemCount = itemCount
Me.myPager.Currentpage = Me.grdTest.PageIndex

And you are all set.

Download the code

Labels: .NET

posted by Tom Becker at 11/19/2008