Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Article

Customize Pager of DataGrid Control

Rate me:
Please Sign up or sign in to vote.
3.71/5 (10 votes)
12 Jul 20054 min read 78.6K   872   22   8
How to customize the pager of a DataGrid control.

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:

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

Next is the Page_Load event handler:

C#
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.

C#
//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:

C#
//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:

C#
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.

C#
//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.

C#
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.

C#
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


Written By
Pakistan Pakistan
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMany thanks Pin
JoeFallon5-Feb-07 10:01
JoeFallon5-Feb-07 10:01 
Generalnice solution Pin
HaCKTiCK25-Jan-07 0:07
HaCKTiCK25-Jan-07 0:07 
GeneralTx a lot Pin
Prajakta_1210-Aug-06 20:50
Prajakta_1210-Aug-06 20:50 
GeneralIts really worth for me Pin
kirubasankar13-Jun-06 22:02
kirubasankar13-Jun-06 22:02 
GeneralAbout customizing the paging Pin
AyalSorko-ram14-Jan-06 18:36
AyalSorko-ram14-Jan-06 18:36 
GeneralRe: About customizing the paging Pin
Razi Bin Rais.15-Jan-06 18:24
Razi Bin Rais.15-Jan-06 18:24 
Hi Ayal

Well the simplest way to add 'Images' or links like 'export to excell' is by injecting / adding literal control and then put image in it , think of it as adding image to anywhere else in WebForm . Moreover for links you may want to use hyperlinks and add them to grid , the main point is if you want to add something to paging or want to alter it you have to override method shown in article.

Razi Bin Rais
Software Engineer / Consultant
Kalsoft Pvt Ltd
www.kalsoft.com.pk

Life without Excellence is Meaningless
GeneralPaging modifications Pin
JoeLeTaxiUK13-Jan-06 3:47
JoeLeTaxiUK13-Jan-06 3:47 
GeneralThanks for the handy tip Pin
cliff hewett19-Sep-05 8:07
professionalcliff hewett19-Sep-05 8:07 

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

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