AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=628&pId=-1
Easy DataGrid Paging with the DataGridPager
page
by J. Ambrose Little
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 30933/ 30

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!



©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-04-18 6:15:54 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search