Click here to Skip to main content
Click here to Skip to main content

Customize Pager of DataGrid Control

By , 12 Jul 2005
Rate this:
Please Sign up or sign in to vote.

Introduction

In this article I will show how to customize the pager of the DataGrid control. We will first see how to access the row that contains the pager and later how to manipulate it according to our needs.

How to get hands on DataGrid’s row Containing the pager

Let us take a look at Figure 1.0 which shows a DataGrid control showing some rows with each row showing a number.

The last row is the one that we want to get access of. After accessing it we want to add some text to the absolute right position of this row, as shown in the following figure:

As we know now what we want to achieve, let's go straight to coding. I create a ASP.NET Web application using Visual Studio .NET 2003, and add a DataGrid control to a WebForm (if you don’t have Visual Studio .NET 2003 installed on your machine, don’t worry, simply create a .aspx page and work with the code as described in the later sections, although I highly recommend to use a code behind file so the code is understandable and logically separate from the presentation).

First, we declare a DataGrid control instance:

protected System.Web.UI.WebControls.DataGrid dgItems;

Next is the Page_Load event handler:

private void Page_Load(object sender, System.EventArgs e)
{
    this.dgItems.ItemCreated += 
      new DataGridItemEventHandler(dgItems_ItemCreated);

Here we attach DataGrid’s ItemCreated event. Actually this event gives us access to each and every row in the DataGrid as they get created. We take advantage of this and use this event to access the row containing the pager.

//Declare and intialize  ArrayList
ArrayList arrLst = new ArrayList();

//Simply add Numbers from 1 - 50 to the ArrayList
for(Int32 count =  1; count <= 50 ; count++)
{
    arrLst.Add(count.ToString());
}//end for

An ArrayList, arrLst, is created and numbers from 1 to 50 are added to it. Later we use arrLst as DataSource for the DataGrid. By the way if you feel strange to set an ArrayList as a data source please don’t, as a DataGrid control can bind to any type that implements the IEnumerable interface. This way you can use HashTable, Dictionary, Array, or a Stack as a data source for the DataGrid.

Moving on to the fragment of code:

//Set datasource of datagrid to arraylist

this.dgItems.DataSource = arrLst;

/Enable Paging , so that we can perform custom styles on it 
this.dgItems.AllowPaging = true;

//Set the item Limits for a single page
this.dgItems.PageSize = 10 ;

//Specify Paging Style
this.dgItems.PagerStyle.Mode = PagerMode.NumericPages;

//Finally Bind the data
this.dgItems.DataBind();

The code is pretty much self explanatory. First set the DataSource of the DataGrid control to the ArrayList, arrLst, we created. I also allow paging, so set the page size, set the mode of pagerStyle to Numeric which can be changed, and finally bind the data to the DataGrid, dgItems, by calling the DataBind() method.

Looking into the Item_Created event handler:

private void dgItems_ItemCreated(object sender, DataGridItemEventArgs e)

    if ( e.Item.ItemType == ListItemType.Pager)
    {

Here we start with the check. As for now we are only interested in the row containing the pager. So we have to first check for it. We do it by checking the current Item’s ItemType, which can be Pager, Header, Footer etc. We check for Pager. As you can see, we take the help of the ListItemType enumerator which makes it easy to check for the desired type.

//Add a new Label Control
Label lblPagerText = new Label();
lblPagerText.Text = " | Pages --> " ;
lblPagerText.Font.Bold = true;

Next we create a new Label control lblPagerText. We will be using this lblPagerText for displaying the text at the absolute left corner of the row. We set the lblPagerText’s Text property and make it bold by setting the Bold property to true.

Although I use Label control here, once you get the trick the possibilities are numerous. For example, you may want a hyperlink which shows the details as you click on it.

if ( e.Item.Controls[0].FindControl("lblPagerText1" ) == null)

Next we have a check that confirms that our Label control lblPagerText1 is not already added to the control. If we remove this check, the control will be added multiple times.

e.Item.Controls[0].Controls.AddAt(0,lblPagerText);

Finally we add the Label to the Controls collection. Let me explain it in detail. The first item, Controls[0], returns a TableCell control. This table cell holds all the paging links. Now as we want our text to be inserted in the beginning of the row, we must add it in the beginning of the Controls collection by using the AddAt method of the Controls collection and using index 0 to force our control to be added as the first control.

Now compile the code and run it. If you are using the sample solution attached with the article, just run the GridProj EXE.

Conclusion

Here we saw how to insert a text at the begging of the row showing the pager on the DataGrid. In future articles, I will show you how to get rid of numeric paging and put our own paging characters, for example alphabets, and make them work as normal paging links. For now, good bye and happy programming!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

razi bin rais

Pakistan Pakistan
No Biography provided

Comments and Discussions

 
GeneralMany thanks PinmemberJoeFallon5-Feb-07 10:01 
Appreciate the discussion.
This was exactly what I needed to do.
Simple once you see it.
Thanks!

Generalnice solution PinmemberHaCKTiCK25-Jan-07 0:07 
GeneralTx a lot PinmemberPrajakta_1210-Aug-06 20:50 
GeneralIts really worth for me Pinmemberkirubasankar13-Jun-06 22:02 
GeneralAbout customizing the paging PinmemberAyalSorko-ram14-Jan-06 18:36 
GeneralRe: About customizing the paging PinmemberThe Razi15-Jan-06 18:24 
GeneralPaging modifications Pinmemberdaveyboypruce13-Jan-06 3:47 
GeneralThanks for the handy tip Pinmembercliff hewett19-Sep-05 8:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 13 Jul 2005
Article Copyright 2005 by razi bin rais
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid