Jan 192010

Recently we had a client ask us to add a label in front of the paging control on an ASP.NET gridview numeric paging control so that users would know what the numbers meant. This seemed like a reasonable request as we were dealing with users who may not be the most tech savvy, plus it didn’t seem like there would be much work that would need to be put in to accomplish this goal. To understand the solution you need to understand the steps at which it took to get there.

The first thing I tried was modifying the PagerTemplate, but little did I know that in ASP.NET when you modify this template on a GridView you overwrite the entire paging control. This obviously wasn’t what I wanted, I just needed to add a little text in front of all the page numbers, I didn’t want to rewrite it entirely.

So I did some searching around and I found several articles on how to add items to the Pager Row collection on data binding. Now I thought this would work great, all I needed to do would be to add a simple literal control that had my text in it and I would be good to go. Well this method worked, but it did not accomplish what I wanted as it put my text on the line before the paging control. Since this just looked bad and really didn’t offer what the client wanted it was back to the drawing board.

Next I decided it might be just easier to write my own paging control, or so I thought. So I went back and added the PagerTemplate back in place and during the data bound event I began the process of creating my custom paging control. Well, i’m still not sure what I was doing wrong but my links to other pages just wouldn’t work. It could have been because of an update panel or something else but it never changed pages.

Luckily during my attempts to get my custom paging control working I realized something, the default numeric paging is created using a html table. So I went back to using the default paging control and decided to take a look at what type was used by .NET to create the paging control. Turns out the type of the default paging control is System.Web.UI.WebControls.PagerTable, unfortunately you do not have access to this class through the development environment. However, it is cast-able as a standard HTML table control. After I converted it to a standard HTML table object in my code it was as simple as creating a new cell with my text that I wanted to add and then adding it to the beginning of the collection of cells in the row.

protected void GridView1_DataBound(object sender, EventArgs e)
    GridViewRow pagerRow = GridView1.TopPagerRow; //GridView1.BottomPagerRow

    if (pagerRow != null && pagerRow.Cells[0].Controls[0] is Table)
        Table tblPager = pagerRow.Cells[0].Controls[0] as Table;

        if (tblPager != null)
            TableCell tcPageLabel = new TableCell();
            tcPageLabel.Text = "Page:";
            tcPageLabel.HorizontalAlign = HorizontalAlign.Right;
            tblPager.Rows[0].Cells.AddAt(0, tcPageLabel);

Above you will find an example of the DataBound event for my example GridView. This example assumes you are using a top paging control. If you are using a bottom pager control or both you will need to modify the logic in my example to grab the correct paging row.

  One Response to “Dynamically modifying the ASP.NET GridView paging control.”

  1. That worked well. Thank you 🙂

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.