Customize Pager of 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:

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.