Easy DataGrid Paging with the DataGridPager
 
Published: 15 Feb 2005
Unedited - Community Contributed
Abstract
Ever get tired of doing the same old stuff over and over again just to add paging to your DataGrid that looks nice and offers a lot of options to your users. Never fear, the DataGridPager is here to make your life easier! This article provides a short tutorial on using this nifty control to propel you on to more important development challenges.
by J. Ambrose Little
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 31103/ 33

Introduction

[Download Sample]

A few years ago I got fed up with the less-than-desirable paging capabilities of the DataGrid.  Rather than go out and buy a custom control, I decided I’d just try my hand at building one that I could reuse across applications.  Thus was born the DataGridPager, my attempt at making DataGrid paging easier and better looking.  The control itself is available for free (source code available for only $50).  This article provides a small yet sufficient example that should answer most of the questions you might have about how to set up and use the control.

If you want to follow along yourself, go ahead and download the sample and extract it to a drive on a computer that has ASP.NET 1.1 installed.  Then just create a virtual directory in IIS called “DgpSample” that points to that directory on your drive.  At this point, you should be able to see the sample in action by navigating to http://localhost/DgpSample. Your screen should show something like Figure 1.

Figure 1 – DataGridPager in Action

Immediately you can see several key features:

1) You have first, previous, next, and last options (indicated by the angle brackets).  The display value for these can be customized.

2) You have Google-like direct page access to pages surrounding the currently-selected page.  You can customize the number of pages displayed before and after the current page.

3) There’s an item summary that tells you which items you are viewing and how many there are total.  You can customize the text here and choose display it above or below the pager links.  You can also not display it at all (default).

4) There are paging facilities above and below the DataGrid, and they look nice.  This is because rather than inheriting from the DataGrid and forcing one to use a custom DataGrid, I simply add to the DataGrid, allowing you to place as many pagers as you want wherever you want on the page.

Using the DataGridPager

So, is this difficult?  Not at all, certainly not much more involved than enabling the standard paging on the DataGrid, and it is so much better.  The following two figures show what it takes to declare and use the DataGridPager in your pages.

Figure 2 – Registering the DataGridPager

 <%@ Register TagPrefix="lchip" Namespace="Littlechip.Web.UI.WebControls" 
    Assembly="Littlechip.DataGridPager" %>

If you put the Littlechip.DataGridPager.dll in your application’s bin directory, it should find it using this control registration directive.  Then you can use it anywhere on the page as in Figure 3.

Figure 3 – Declaring a DataGridPager

 <LCHIP:DataGridPager id="TopPager" runat="server" PagerGrid="Orders"
  ItemCountStyle="Bottom" Width="500px" CssClass="Pagers"
UseConfigSettings="True"></LCHIP:DataGridPager>

As you can see, there’s not much to this, and all of the properties set here can be set in Design View in Visual Studio .NET using the Property Grid.  The PagerGrid specifies the ID of the DataGrid that the pager will be hooked up to—the Property Grid will even provide a drop-down list of all the DataGrids on the page.  ItemCountStyle is an enumeration that you can use to specify where to display the item count summary.  Width and CssClass are obvious, and UseConfigSettings allows you to set some application-wide DataGridPager settings in the web.config file.

Unfortunately, that’s not all there is to it.  ASP.NET 1.1 requires code to do a lot of simple things, and my control is no exception (maybe it’ll be better if I update it for the GridView!).  But for now, we still need to do a bit of code.  The nice thing is that, if you’re using Visual Studio .NET, you can automate the event wiring by double-clicking on the PageIndexChanged event on the Property Grid event list.  Figure 4 shows the code that you’d need to write in C# to do this manually.

Figure 4 – Wiring Up the DataGridPager’s PageIndexChanged Event

 this.TopPager.PageIndexChanged += new 
  System.Web.UI.WebControls.DataGridPageChangedEventHandler(
    this.Pager_PageIndexChanged);

<p class="MsoNormal">
private void Pager_PageIndexChanged(object source, 
  System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
      this.BindGrid();
}

The first line in Figure 4 actually belongs in the OnInit method (or InitializeComponent if Visual Studio .NET does it for you).  The Pager_PageIndexChanged method matches the System.Web.UI.WebControls.DataGridPageChangedEventHandler delegate, so it should be familiar if you’ve done DataGrid paging before.  In fact, you’d pretty much have to do exactly this if you were to use the built-in paging.  The nice thing is that, as you might note, all I do is call the BindGrid method; the DataGridPager will automatically reset the DataGrid’s page index for you if you’re not using custom paging. 

Note that “custom paging” here means that you are getting individual pages from your data source as opposed to loading up your entire result set.  In our example, we don’t use custom paging, but the DataGridPager does work with it—you just have to be sure to set the DataGrid’s VirtualItemCount property.

The only other thing you need to do to get paging going is to enable paging on your DataGrid just like you normally would if you weren’t using the DataGridPager—by setting its AllowPaging property to True.  But unlike that, you need to also set the PagerStyle’s Visible property to False as in Figure 5.

Figure 5 – Hiding DataGrid’s Built-In Paging

 <PagerStyle Visible="False" />

At this point, you should be good to go.  If you run your page, it should display the pager that you set up and process page change commands by either the first, previous, next, last or direct page access links.  Of course, you’ll probably also want to customize the look and feel a bit to make it prettier.  The easiest way to do this, in my opinion, is by setting the CssClass property of the pager, which is also an easy way to ensure visual consistency amongst your pagers.

The last thing I’ll point out is the way you can set up the pager’s web.config settings.  Figure 6 shows what you’ll need to add in your web.config file.

Figure 6 – Setting up web.config for UseConfigSettings

 <configSections>
      <section name="PagerSettings"
type="System.Configuration.NameValueFileSectionHandler, System, 
Version=1.1.4322.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
</configSections>
<PagerSettings>
      <add key="PriorPageCount" value="5" />
      <add key="AddPageCount" value="5" />
</PagerSettings>

The properties that you can set in this manner are FirstButtonText, PreviousButtonText, NextButtonText, LastButtonText, PriorPageCount, AddPageCount, DisplayPageNumbers, ItemCountStyle, DisplayFirstLast, DisplayPreviousNext, and ItemSummaryText.  As you can see, you use the property name as the key in the PagerSettings section and specify the value you want.

Just How Easy Is It?

So after going through all that, it probably seems a little difficult to use the DataGridPager.  I’ll wager this is mostly due to unfamiliarity.  The only things you have to do with the DataGridPager that you don’t have to do with the DataGrid’s paging are:

1) Register and declare the DataGridPager, setting, at least, the PagerGrid property.

2) Set the PagerStyle’s Visible property to False.

Other than these two things, everything else is either a nicety or something you’d have to do to enable the so-so paging that the DataGrid provides.  And all of these can be done in a GUI if you’re using Visual Studio .NET and add the DataGridPager to your Toolbox. 

Now consider again the benefits the DataGridPager gives you over standard paging:

1) Customizable first, previous, next, and last page links, aligned on the far left and right sides of the pager, and direct page access via page numbers—all can be displayed at once, offering the greatest variety of options for paging to your users.

2) The ability to specify the number of pages to directly link to before and after the current page.  The default paging displays all the pages, which can quickly become quite unruly with large numbers of pages.

3) Customizable item count summary that can easily be displayed above or below the pager, which is non-existent on the DataGrid—you’ll have to code this yourself.

4) Ability to specify application-wide pager settings to ease consistency and maintenance.

I think anyone who’s bothered coding these features will readily agree that this control can save a lot of headache and trouble and perhaps even wow your users if you make it pretty with CSS.  So what are you waiting for?  If you haven’t already downloaded it, do it now and start using the DataGridPager to ease your development pains today!



User Comments

Title: PAGING PROBLEM   
Name: vinod
Date: 2008-06-03 11:17:44 AM
Comment:
hi,
i can fill the datgrid with paging.
but while doing update or delete actiond on other pages records changing in the 1st page.
so can any 1 tel me how to use sessions by keeping the pageindex value and change the records.
Title: No Support Available   
Name: J. Ambrose Little
Date: 2008-04-18 2:15:39 PM
Comment:
Hi folks,

I wrote this control about four years ago and this article over three years ago. I'm so far away from this code now, I am basically new to it myself. :)

It's a free component, and I can't afford to provide any more support for it. Sorry!

The source is still available for $50 (to be fair to those who have paid for it), so if you'd like the source, just contact me at ambrose [at] aspalliance [dot] com. Please know that the source is also as-is with no warranties, guarantees, and no support implied or otherwise.
Title: Custom paging works (kind of)   
Name: Matt
Date: 2008-04-18 12:24:09 PM
Comment:
Thanks for this control! I am trying to impliment it using custom grid paging, in conjunction with a stored Oracle procedure supplying only the data that I need for one page at a time. I am setting the VirtualItemCount of the datagrid to the total number of items each time the data is bound to the grid. The VirtualItemCount is generally greater than the number of rows returned by the procedure. The problem I am having is with the button display of the pager. As you would expect, page 1 can't be selected initially, but even when you click ">>", it never becomes selectable, even though the data in the grid appears to page correctly. Any help with troubleshooting this would be helpful. Thanks!
Title: LChip dll   
Name: Nanu
Date: 2007-07-11 1:09:17 AM
Comment:
From where i can get the dll required for the DataGridPager control? I couldnot find it inall my dlls list.
Title: problem   
Name: yasmin
Date: 2007-07-03 4:14:43 AM
Comment:
I do what you say
but there is error that say
"Error Creating Control TopPager"
what the problem
Title: Unbind Pager   
Name: Dieter
Date: 2007-04-26 8:53:48 AM
Comment:
I have this set up with a filter form that filters records from the database. I unbind the datagrid when I reset the form. How do I unbind the pager when I unbind the datagrid?
Title: GridView Version   
Name: Ambrose
Date: 2007-02-14 3:07:34 PM
Comment:
Joel,

I looked into the GridView back in alpha days, and it didn't appear to be a simple update, so I ditched the idea. The GridView itself has decent paging support via templates, so I didn't think the update worth the time. Also, there are some changes coming in Orcas that should provide more options.
Title: How about a gridview version   
Name: Joel Zinn
Date: 2007-02-14 11:29:45 AM
Comment:
Ambrose. I have used this control for quite a while and have really enjoyed it. Since we are moving towards the new gridview control, have you thought about doing this same thing for the gridview?
Title: Stuck with error   
Name: jkolie
Date: 2006-11-15 5:07:27 AM
Comment:
Iget this error System.Exception: Invalid CurrentPageIndex value. It must be >= 0 and < the PageCount.
Title: Thanx   
Name: sunny sinha
Date: 2006-08-28 7:04:29 AM
Comment:
its a great way to cut down ur labour thanx a lot
Title: Need help   
Name: ranu
Date: 2006-08-10 1:24:27 AM
Comment:
Nice control

thought of using it in my project but how will i include radio buttons inside this datagrid and onclick i want to delete the entire row


and want to fetch the datagrid items from database


can u pls help me out
Title: It's very easy   
Name: Prashant Kelkar
Date: 2006-08-02 2:18:38 AM
Comment:
It's Very easy to use.
from now i am starting to use above code.
Title: RE: ItemSummaryText   
Name: Ambrose
Date: 2006-07-07 10:20:09 AM
Comment:
Yeah, that's a format string, and I think it is:
0 - first item shown
1 - last item shown
2 - total items

SO in your case, it'd be something like:
Cars {0}-{1} of {2}
Title: ItemSummaryText   
Name: Ash
Date: 2006-07-07 6:24:16 AM
Comment:
Nice controll.

Could you specify the values for ItemSummaryText? If I set value="Cars" it only shows "Cars". I want to show "Cars 10-20 of 30".

Thanks.
Title: cool control   
Name: prabhoda
Date: 2006-06-29 9:39:11 AM
Comment:
this is a reealy cool control . thankx for the developers
Title: RE: Purchase Source   
Name: Ambrose
Date: 2006-05-16 9:45:41 AM
Comment:
To purchase source code, send a PayPal payment to me at ambrose@aspalliance.com and follow up with an email to me to let me know where to send the code and where the payment is coming from.
Title: Buy Source   
Name: Andy Grimes
Date: 2006-05-11 11:45:46 AM
Comment:
How can I buy the source to the control?
Title: ItemSummaryText issue   
Name: Andarial
Date: 2006-03-22 8:59:22 AM
Comment:
n/m - I must have missed that other post of how he fixed it. Sorry!! *blush*
Title: ItemSummaryText issue   
Name: Andarial
Date: 2006-03-22 8:57:57 AM
Comment:
Hi Ambrose, I really like your control - great work!

However, like Scott said a few posts up, I could use some help with the item summary text. I have 2 pages (12 items). On the first page it says "Items 1 - 1 of 1." On the 2nd page, it says "Items 11 - 1 of 1."

Also, the Item Summary Text is not centered like it is in your example.

Do you remember how you helped Scott? I would really like to use your control.

Thanks! : )
Title: great work!   
Name: Markus
Date: 2006-03-09 11:36:42 AM
Comment:
Really great control! Thanks for sharing it!
Title: RE: Laura   
Name: J. Ambrose Little
Date: 2006-02-28 9:10:40 AM
Comment:
Laura, I'd recommend downloading the sample and using it as a guide.
Title: HELP   
Name: Laura
Date: 2006-02-28 8:58:22 AM
Comment:
i just cannot find where to put the first line in figure 4, i need to declare toppager first, right??
i am so lost...
Title: help   
Name: Newn kourne
Date: 2005-12-15 1:27:24 AM
Comment:
Good control,Can you send it for me.I have not it....
Thank you! My e-mail:newsight886@163.com
Title: Huseyin   
Name: J. Ambrose Little
Date: 2005-10-21 6:34:56 PM
Comment:
He figured it out on his own. It had something to do with using a drag-n-drop dataset for the datasource instead of doing it in code. I haven't had a chance to dig into it further myself.
Title: Items 11 - 1 of 1   
Name: Huseyin
Date: 2005-10-21 5:41:52 PM
Comment:
Ambrose thanks for the dll, it saved a lot of time. Only problem I had is the page count and the last item index, whatever I do it always shows 1 of 1. Were you able to help Scott (who posted the same issue earlier)?

Thanks,

Huseyin
Title: Prashant   
Name: J. Ambrose Little
Date: 2005-10-20 5:54:04 PM
Comment:
No, I don't use cache or session at all in this control.
Title: Internal Workign   
Name: Prashant Sharma
Date: 2005-10-20 5:47:57 PM
Comment:
Hi,
My question is : Does your control internally uses cache or session? Because that would put constraint on the server , otherwise it works gr8.
Thanks
Prashant
Title: Prashant   
Name: J. Ambrose Little
Date: 2005-10-20 5:01:42 PM
Comment:
My control has nothing to do with how you handle your data. All that is standard ASP.NET stuff--you just have to rebind the grid in the page index change handler. You control how the grid is bound yourself.
Title: Great Contorl   
Name: Prashant Sharma
Date: 2005-10-20 4:05:22 PM
Comment:
Hi,
This controlhas saved hell lot of time. I've one query. Does it uses cache or session internally or every click brings records from the db. Actually, i was using a control earlier which was using cache. My application pulls 10K plus records from the db so using cache puts constraint on server resources. So i'm concerned, though i found that your control is much faster than earlier one.
Thanks
Prashant
Title: Scott   
Name: J. Ambrose Little
Date: 2005-10-19 5:03:12 PM
Comment:
Sorry, Scott. I'm going to need to see more. Can you email your page and code behind to me at ambrose [at] aspalliance [dot] com?
Title: Thanks   
Name: scott
Date: 2005-10-19 4:55:55 PM
Comment:
LCHIP:DataGridPager id="TopPager" runat="server" PagerGrid="dg" ItemCountStyle="Bottom" Width="760px"
CssClass="Pagers" UseConfigSettings="True" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 56px"
LastButtonText="Last" NextButtonText="Next" PreviousButtonText="Previous" FirstButtonText="First"
AddPageCount="5" PriorPageCount="5"></LCHIP:DataGridPager
Title: Scott   
Name: J. Ambrose Little
Date: 2005-10-19 4:44:40 PM
Comment:
Scott, can you post your control markup here so I can see what's up with it?
Title: Good for the newb guy   
Name: Scott Baldridge
Date: 2005-10-19 4:36:53 PM
Comment:
Thanks for the control. It fairly simple to use for the newb guy (me).

I could use some help with the item summary text. I believe that I have done everything corectly yet the only thing that is displayed is the first row of the page being displayed. For example, if paging is set to 10 and I am displaying page two then this is displayed "Items 11 - 1 of 1."
What can be done to correct this?
Title: Back color on the links   
Name: Dave
Date: 2005-09-08 11:26:52 AM
Comment:
Hey, nice control. I just downloaded the sample but if I change the background color for the control it doesn't change it for the links (page numbers, next, first, etc). Is there a way to fix that?

Thanks!
Title: Image Buttons   
Name: J. Ambrose Little
Date: 2005-08-12 7:22:44 AM
Comment:
As far as I can tell from the code (it's been a few years), it doesn't support image buttons as is. But on other controls I've built, I would allow people to specify "img:" to specify an image. If you had the source, you could modify the control to do that. :)
Title: imgage buttons   
Name: Jon
Date: 2005-08-12 2:41:21 AM
Comment:
How can image buttons be used ?

Tried sending html code thru but it won't accept it .
Title: VB .NET   
Name: J. Ambrose Little
Date: 2005-06-14 11:24:09 PM
Comment:
Well, this won't work at all with VBScript as this is an ASP.NET control. For VB.NET, it should work fine--you'll just need to run the sample code through one of the many C# to VB translators available for free on the web.
Title: will this work with vb   
Name: chris jones
Date: 2005-06-14 11:05:50 PM
Comment:
Hi
I am a .net newbie so please excuse me if I am doing something silly, I have been trying to use your pager control with vb script. The sample code in C# works fine but I cannot complile it in vb. have you any ideas?
Title: RE: point   
Name: J. Ambrose Little
Date: 2005-05-26 11:42:30 AM
Comment:
"coder," that's a silly thing to ask. The point is that you don't have to do that. This control provides extended paging functionality built for you. The point is the same as it is for all server controls--saving time through reuse. If you'd prefer to extend the datagrid yourself, more power to you.
Title: point   
Name: coder
Date: 2005-05-26 11:33:42 AM
Comment:
whats the point in this. anyone with any amount of c# skill could add customisable paging buttons and just save it as an extended datagrid class?
Title: Control   
Name: Walter
Date: 2005-03-11 1:56:36 PM
Comment:
Thanks Ambrose. I appreciate your help.

Walter
Title: It's There   
Name: J. Ambrose Little
Date: 2005-03-10 2:13:27 PM
Comment:
Walter, the web.config file in the sample exemplifies how to do that. In the < PagerSettings /> section, you can add as many key/values as you want, but the keys must correspond to the property name on the pager that you want to set, so, in your case, you could just add something like:
< add key="FirstButtonText" value="<< First" />
< add key="LastButtonText" value="Last >>" />
< add key="NextButtonText" value="Next >" />
< add key="PreviousButtonText" value="< Previous" />
Title: Control   
Name: Walter
Date: 2005-03-10 1:58:19 PM
Comment:
Great control. I'm using it now. Do you have an example of the we.confi where it shows the key for previous, next first and last values?
Title: Nice one   
Name: Sonu Kapoor
Date: 2005-02-25 10:10:19 AM
Comment:
Nice control Ambrose. I think I can use it in my existing applications, where I dont have paging implemented yet. Saves coding time for me :) Thanks!






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 9:26:25 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search