DFS

On the face of it, getting paging to work with images instead of the default "next, previous, first, last (
NPFL)" or "1,2,3...." or any of the variations possible with the DataGrid was supposed to be simple. Or so I thought, because after searching the internet for an entire day, these were the best two articles that had detailed help on how to customize paging in grids and unfortunately for me, both these methods did not help me achieve what I needed.
Microsoft asp.net Grid Pager Settings: No one could have explained better how the PagerSettings Class works. Basically, there is are two things to note.

1. Mode - This defines which mode the paging is to follow, either numeric or text (NPFL) or a combination thereof. If you are looking to replace default values with images, you'll want to set the mode as"NextPreviousFirstLast".

2. Property - If any part of the mode contained non-numeric input ( NextPrevious, NextPreviousFirstLast, or NumericFirstLast ), the property can be set to customize the non-numeric part. You may use either text or images for this.

Replacing text with text should be pretty straightforward, just specify your own desired text for FirstPageText, PreviousPageText, NextPageText and LastPageText. Your text will replace the default First, Previous, Next and Last respectively.
Replacing text with images 'should again be pretty straightforward'. According to this article, just specify the path to the image for FirstPageImageUrl, PreviousPageImageUrl, NextPageImageUrl, LastPageImageUrl and you should be seeing images instead of text. Remember not to specify text values if you intend to see only images.

This is how it should look

<asp:gridview id="CustomerGridView"
datasourceid="CustomerDataSource"
autogeneratecolumns="true"
datakeynames="CustomerID"
allowpaging="true"
runat="server">

<pagersettings mode="NextPreviousFirstLast"
firstpagetext="First" or FirstPageImageUrl="~/Path to Images/Image.gif"
lastpagetext="Last" or LastPageImageUrl="~/Path to Images/Image.gif"
nextpagetext="Next" or NextPageImageUrl="~/Path to Images/Image.gif"
previouspagetext="Prev" or PreviousPageImageUrl="~/Path to Images/Image.gif"
position="Bottom"/>

</asp:gridview>

The images did appear as expected in the right place, but the problem was that they were not clickable. No clue as to what could be the reason.

So we then hop on to method 2.

http://kikosantos.wordpress.com/2006/05/17/custom-paging-in-gridview-con...

Francisco Santos, Jr.

gives a really good practical explanation of how to go about customizing PagerSettings. He places the image buttons separately into a PagerTemplate tag instead of the pagerSettings tag previously used. So your code should look like this.

<asp:gridview id="CustomerGridView"
datasourceid="CustomerDataSource"
autogeneratecolumns="true"
datakeynames="CustomerID"
allowpaging="true"
runat="server">
<PagerTemplate>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/images/controls/first.gif"
CommandArgument="First" CommandName="Page" />
<asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/images/controls/previous.gif"
CommandArgument="Prev" CommandName="Page" />

<asp:ImageButton ID="ImageButton3" runat="server"
ImageUrl="~/images/controls/next.gif"
CommandArgument="Next" CommandName="Page" />
<asp:ImageButton ID="ImageButton4" runat="server"
ImageUrl="~/images/controls/last.gif"
CommandArgument="Last" CommandName="Page" />
</PagerTemplate>
</asp:GridView

And voila!!! it works. The images appeared and took me to the correct page when clicked; everything was functioning well.
EXCEPT for one thing. The "First" and "Previous" images were appearing even on the first page of the grid. And the "Next" and "Last" images were appearing on the last page of the grid. Obviously, not a big deal, but this can indeed confuse "normal" users who'll find one more reason to "bless :-)" the development team for a "mal-functioning page".

It then occurred to me that maybe we can use div tags inside the customizable text and set background images using styles to achieve the desired effect.
So, going back to method 1, this is the code I used:

<asp:gridview id="CustomerGridView"
datasourceid="CustomerDataSource"
autogeneratecolumns="true"
datakeynames="CustomerID"
allowpaging="true"
runat="server">

<pagersettings mode="NextPreviousFirstLast"
firstpagetext="<div id='first'> No text generally here </div>"
lastpagetext="<div id='last'></div>"
nextpagetext="<div id=next></div>"
previouspagetext="<div id=prev></div>"
position="Bottom"/>

</asp:gridview>

Stating the obvious for the benefit of everyone, single quotes are used inside the div to specify the id so that the property "firstpagetext" is not closed prematurely.

Then I specify the background image with the following code in the stylesheet:

#first
{
background-image: url("~/Path to Image/Image.gif");
background-repeat: no-repeat;
width: 30px; height: 15px; /* Just to make sure the button is not wrapped for lack of text*/
}
...similarly for last, next and previous.

Simple enough and it doesn't cause any extra load on the page. The buttons(images) appear intuitively and work as expected. First and Previous buttons do not appear on the first page and all buttons take me to appropriate page when clicked. Feel free to drop a line or two if you have any questions.