ASP.NET GridView with Custom Paging UI

Abstract: The following article demonstrates how to customise how the paging is displayed in the GridView control.

ASP.NET GridView with Custom Paging UI

The GridView is a great web control when you want to display data from the database. Out of the box it has built-in paging, sorting and a multitude of events that you can control. Recently I thought about the paging aspect of the control and thought about how you could display the page numbers as something other than numbers, such as letters. Well here’s the answer! This code has not been requested by any of my customers but I thought it would be cool to try it out!

The trick to making this work is once the data has been bound to the GridView, you need to create the paging manually. This can be achieved by getting a reference to the BottomPagerRow property. The BottomPagerRow property represents the bottom pager row in a GridView. Once you have that reference you can create custom paging. For this example I’ll be connecting to the Northwind database. If you don’t have a copy of it, you can go here to download it.

Open the Default.aspx page and add a GridView control to the page. Click on the Smart Tag and in the Choose Data Source option choose <New data source...>

Choose Database as the data source and let the name as chosen by Visual Studio.

Click OK. In the following screen choose your connection string and click Next:

After that select CustomerID, CompanyName, ContactName, ContactTitle, Address and City from the Customers table and click Next and then Finish after that:

Now that after we have defined the data, we need to open the Default.aspx page and add a PagerTemplate to the GridView. The PagerTemplate allows you to customise the look and feel of the paging that will be displayed. Your code for the GridView will look like the following:

In the code above I have created a PagerTemplate. Inside I have created a simple HTML table that contains a PlaceHolder control. I am using a PlaceHolder because I want to dynamically add LinkButton controls to the PagerTemplate.

That’s it for the UI. Now we need to create the code that runs our custom paging. There are two events you need to hook into to make this work. They are the DataBound and the PageIndexChanging events. Handling the PageIndexChanging event is critical when you’re creating custom paging. Without it the GridView will not know which page to display to the user and throw an exception. Below is the code that creates and handles the paging:

The main piece of code is the SetPaging method. This method is called once the GridView has been data bound. Firstly the code gets a reference to the paging row by the BottomPagerRow property. Next a LinkButton is created. This is created because the GridView will accept special parameters via the CommandName and CommandArgument properties. The CommandName must be set to Page but the CommandArgument can be one of the following values:

Integer Value – Navigates to the page number

Next – Navigates to the next page

Prev - Navigates to the previous page

Last – Navigates to the last page

First – Navigates to the first page

I am setting the CommandArgument to the index of the row. This way whenever a user clicks pages through the data, the GridView will know which page to display. And finally instead of showing numbers I am displaying letters of the alphabet. The letter A starts at 65, so I have created a variable called alphaStart to 65. To turn a number into an ascii value you can use the Convert.ToChar(alphaStart).ToString() code. For each row in the GridView I am incrementing the value of alphaStart, so that 1 will equal A, 2 will equal B etc. Once the LinkButton has been created, it is added to the PlaceHolder controls collection. The result is paging with letters.

This example might not be used in the real world, but I found it fun trying to work out how to make this work. Hopefully you’ll find some useful bits of information in here too.

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan

Feedback - Leave us some adulation, criticism and everything in between!

I loaded the grid on page_load neglecting the postback everything went fine, but when I restricted the code in page_load to not ispostback, the event (grid_PageIndexChanging) is not raised and my paging controls are gone

Comment posted by
Malcolm Sheridan
on Monday, June 29, 2009 7:26 PM

@Madhu
Are you using the code from the sample?

Comment posted by
Madhu
on Tuesday, June 30, 2009 10:45 AM

@Malcolm
Mine is different from the sample, I have some IList & Databind calls

Actually I didn’t understood the following code in that sample - "if (IsPostBack){ SetPaging(); }"
As per the things I referred the above code might be workaround because on postback the dynamically generated link buttons are not available, if this is the case I got that working by doing the same on postback

Kindly correct if I am going wrong, Thanks for the early reply

Comment posted by
Malcolm Sheridan
on Tuesday, June 30, 2009 8:09 PM

@Madhu
Because the paging is dynamic, it needs to be recreated on postbacks. That is why that code is there.

Comment posted by
James Smith
on Friday, July 3, 2009 9:03 AM

i couldn't understand the reason to use letters. what does it do? when i click on "B" or "D", the display does not start with "B" or "D". could you explain? thank you.

Comment posted by
James Smith
on Friday, July 3, 2009 11:04 AM

i couldn't understand the reason to use letters. what does it do? when i click on "B" or "D", the display does not start with "B" or "D". could you explain? thank you.

Comment posted by
Malcolm Sheridan
on Friday, July 3, 2009 5:56 PM

@James Smith
Hi James. This was just an example of how you can customize the paging in a GridView. Instead of letters you could display images, or anything else.

Greetings,
Thank you for the useful article.
I think that you have an rror in the article in the line :
I am setting the CommandArgument to the index of the row
so it should be I am setting the CommandArgument to the index of the page.

I code it,but it did not work.when I click the alpha, the page control disappear, and the gridview is still at the first page.But after I add SetPaging() in Page_Load, and change SetPaging() in GridView1_DataBound to "if (IsPostBack) SetPaging();".Then it works! Why?
the code is as follows:
protected void Page_Load(object sender, EventArgs e)
{
SetPaging();
}
protected void GridView1_DataBound(object sender, EventArgs e)
{
if (IsPostBack) SetPaging();
}
The other is the same.Can someone tell the reason.Thanks!

Comment posted by
Gary
on Sunday, September 20, 2009 10:29 PM

This is an excellent article Malcolm. Very useful for situations where the dataset is not too large. Nice of you to include both C# and VB code. Works great - thanks much!

Comment posted by
Nisha
on Wednesday, October 7, 2009 10:44 AM

As gyx(above) said same thing happened with me but why i did not understand ?

Comment posted by
Ranveer Rajput
on Thursday, January 7, 2010 4:51 AM

hello ,
i have face a ploblem - gridview having paging i have dropdown to each dropdown item i have fill gridview \but after page size i will call page index which is filled by default fillgrid fn.. but i consider a conditon base (ddl.sel.i.text==-value-)
but the problems is that index is go to 2 or 3...... etc. pos not load at begin condition.
please help...., thanks RV...

Comment posted by
Tom Y
on Tuesday, January 26, 2010 1:32 PM

Question: I brought over some .net 2005 code that does something very similar to this example. But When I run it in 2008, the paging doesnt work. A click on any of the page numbers at the bottom of the gridview takes me to the last page. There is no use of "setpaging" used either in the 2005 version. Any thoughts?

is because when the click event is fired, the SetPaging() will be called and the CommandName "Page" will be associated to your controls. If you don't do this, the command will never be associated and it will become a regular link just like any other. Actually you only need to call the method SetPaging() if it's a postback.

hi malcom. i tried this code in master page. i am using timer in my master page to keep the session alive but the problem is even i am filling the form in one page and the allowpaging method executes on its own in other page. why is this happening i dint understand. Thanks in advance..

Comment posted by
Keith B
on Friday, October 26, 2012 3:39 AM

As Malcolm himself comments, this technique is just an example of what can be done with the Paging area of the grid. IT DOES NOT filter the data to show those rows that start with the letter you clicked on.

Comment posted by
alexander
on Thursday, December 6, 2012 12:45 AM

thanks, but in the loop use less than or equal: for (int i = 1; i <= GridView1.PageCount; i++)