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)
Here we attach
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.
ArrayList arrLst = new ArrayList();
for(Int32 count = 1; count <= 50 ; count++)
arrLst, is created and numbers from 1 to 50 are added to it. Later we use
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
Array, or a
Stack as a data source for the
Moving on to the fragment of code:
this.dgItems.DataSource = arrLst;
/Enable Paging , so that we can perform custom styles on it
this.dgItems.AllowPaging = true;
this.dgItems.PageSize = 10 ;
this.dgItems.PagerStyle.Mode = PagerMode.NumericPages;
The code is pretty much self explanatory. First set the
DataSource of the
DataGrid control to the
arrLst, we created. I also allow paging, so set the page size, set the mode of
Numeric which can be changed, and finally bind the data to the
dgItems, by calling the
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
ItemType, which can be
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.
Label lblPagerText = new Label();
lblPagerText.Text = " | Pages --> " ;
lblPagerText.Font.Bold = true;
Next we create a new
lblPagerText. We will be using this
lblPagerText for displaying the text at the absolute left corner of the row. We set the
Text property and make it bold by setting the
Bold property to
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.FindControl("lblPagerText1" ) == null)
Next we have a check that confirms that our
lblPagerText1 is not already added to the control. If we remove this check, the control will be added multiple times.
Finally we add the
Label to the
Controls collection. Let me explain it in detail. The first item,
Controls, 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.
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!