Click here to Skip to main content
12,881,671 members (30,324 online)
Click here to Skip to main content
Add your own
alternative version


32 bookmarked
Posted 8 Jun 2007

Extending GridView Control: Using a DropDownList Pager

, 25 Feb 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
An article using DropDownList Pager in GridView Control


There are several methods on how to create custom paging in GridView. Most of the ones I've seen implement in PagerTemplate. It is tedious if you have several pages in your application and/or several applications that use GridView and you want them to have a similar appearance. In this article, I will share what I came up with - an inherited GridView control with DropDownList and Label in the Pager section. The DropDownList is your page number and the Label displays what record number you are currently in.

Using the Code

To start with this example, let us create a Website Project and a Class Library Project.

Name the Class Library Project, say EuoControl.

Add a Web Custom Control and let us name it GridEuo. Instead of inheriting from WebControl, inherit it from GridView.


Our main objective here is to render the Pager with DropDownList and Label control, so we need to override the InitializePager of our base control GridView:

protected override void InitializePager
    (GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)
    if (PagerType == ThisPagerType.Regular)
        // if PagerType is not DropDownList
        // render the regular GridView Pager
        base.InitializePager(row, columnSpan, pagedDataSource);
        TableCell cell_1;
        // if we are going to use dropdownlist
        if (PagerType == ThisPagerType.DropDownList)
            // our Pager with DropDownList control

            // create our DropDownList control
            DropDownList ddl = new DropDownList();
            // populate it with the number of Pages of our GridView
            for (int i = 0; i < PageCount; i++)
                ddl.Items.Add(new ListItem(Convert.ToString(i + 1), i.ToString()));
            ddl.AutoPostBack = true;
            // assign an Event Handler when its Selected Index Changed
            ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);
            // synchronize its selected index to GridView's current PageIndex
            ddl.SelectedIndex = PageIndex;

            // add our first TableCell which will contain the DropDownList
            cell_1 = new TableCell();

            // we just add a Label with 'Page ' Text

            // our DropDownList control here.

            // and our Total number of Pages
            // if we are going to use the FirstPrevNextLast buttons.
            LinkButton first = new LinkButton();
            first.Text = "First ";
            // first button will always have a value of zero (0)
            first.CommandArgument = "0";
            first.Enabled = PageIndex > 0;
            // add click event handler
            first.Click += new EventHandler(navigate_Click);

            LinkButton prev = new LinkButton();
            prev.Text = "Prev ";
            // set Prev button arguments to current PageIndex minus 1
            prev.CommandArgument = string.Format("{0}", (PageIndex - 1));
            prev.Enabled = (PageIndex > 0);
            prev.Click += new EventHandler(navigate_Click);

            LinkButton next = new LinkButton();
            next.Text = "Next ";
            // set Next button arguments to current PageIndex plus 1
            next.CommandArgument = string.Format("{0}", (PageIndex + 1));
            next.Enabled = (PageIndex < (PageCount - 1));
            next.Click += new EventHandler(navigate_Click);

            LinkButton last = new LinkButton();
            last.Text = "Last";
            // Last button will always have a value equal to PageCount minus 1
            last.CommandArgument = string.Format("{0}", (PageCount - 1));
            last.Enabled = (PageIndex < (PageCount - 1));
            last.Click += new EventHandler(navigate_Click);

            cell_1 = new TableCell();

            // add the First button to cell controls collection
            // add the Prev button
            // add the Next button
            // add the Last button

        // create a Table that will replace entirely our GridView's Pager section
        Table tbl = new Table();
        tbl.BorderWidth = 0;
        tbl.Width = Unit.Percentage(100);
        // add one TableRow to our Table
        tbl.Rows.Add(new TableRow());

        // the 2nd TableCell will display the Record number you are currently in.
        TableCell cell_2 = new TableCell();

        // add now the 2 cells to our created row
        tbl.Rows[0].Cells[0].HorizontalAlign = HorizontalAlign.Left;
        tbl.Rows[0].Cells[1].HorizontalAlign = HorizontalAlign.Right;

        // in Pager's Row of our GridView add a TableCell
        row.Controls.AddAt(0, new TableCell());
        // sets it span to GridView's number of columns
        row.Cells[0].ColumnSpan = Columns.Count;
        // finally add our created Table
        row.Cells[0].Controls.AddAt(0, tbl);

protected virtual void navigate_Click(object sender, EventArgs e)
    OnPageIndexChanging(new GridViewPageEventArgs

protected virtual void ddl_SelectedIndexChanged(object sender, EventArgs e)
    // on our DropDownList SelectedIndexChanged event
    // call the GridView's OnPageIndexChanging method
    // to raise the PageIndexChanging event.
    // pass the DropDownList SelectedIndex as its argument.
    OnPageIndexChanging(new GridViewPageEventArgs

private Label PageOf()
    // it is just a label
    Label lbl = new Label();
    lbl.Text = "Page ";
    return lbl;

private  Label PageTotal()
    // a label of GridView's Page Count
    Label lbl = new Label();
    lbl.Text = string.Format(" of {0}", PageCount);
    return lbl;

private Label PageInfo(int rowCount)
    // create a label that will display the current Record you're in
    Label label = new Label();
    int currentPageFirstRow = ((PageIndex * PageSize) + 1);
    int currentPageLastRow = 0;
    int lastPageRemainder = rowCount % PageSize;
    currentPageLastRow = (PageCount == PageIndex + 1) ?
        (currentPageFirstRow + lastPageRemainder - 1) :
        (currentPageFirstRow + PageSize - 1);
    label.Text = String.Format("Record {0} to {1} of {2}",
        currentPageFirstRow, currentPageLastRow, rowCount);
    return label;

Let us add a Property that will enable you to choose what PagerType you want to use. Either DropDownList, Linkbuttons, or the regular Gridview pager.

public ThisPagerType PagerType
        return (ViewState["PagerType"] != null ?
            (ThisPagerType)ViewState["PagerType"] : ThisPagerType.DropDownList);
        ViewState["PagerType"] = value;

public enum ThisPagerType
    Regular = 0,
    DropDownList = 1,
    LinkButton = 2

Let us modify the InitializePager method:

if (PagerType != ThisPagerType.DropDownList)
    // if PagerType is not DropDownList
    // render the regular GridView Pager
    base.InitializePager(row, columnSpan, pagedDataSource);
    if (PagerType == ThisPagerType.DropDownList)
        // our Pager with DropDownList control
        // our Pager with LinkButton controls

So, that is it! You may compile and distribute the DLL. But first, let us put it in action.

In the Website project we created earlier, add a reference to our Control Library.


Drag three GridEuo controls onto the Webform. Set the control's AllowPaging property to True. In the first and second GridEuo, set AutoGenerateColumns to False and add DataBound columns. Set PagerType Property of the second GridEuo to LinkButton and the third GridEuo to Regular.


Add this in the code-behind..

protected void Page_Load(object sender, EventArgs e)
    if (!IsPostBack)

private void BindGrid()
    // I am using 'Products' table of the 'Northwind' database
    SqlConnection cn = new SqlConnection
    string q = "select productname, quantityperunit from products";
    DataSet ds = new DataSet();
    SqlDataAdapter da = new SqlDataAdapter(q, cn);

    // the 1st GridEuo
    GridEuo1.DataSource = ds;

    // the 2nd GridEuo
    GridEuo2.DataSource = ds;

    // the 3nd GridEuo
    GridEuo3.DataSource = ds;


protected void GridEuo1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    GridEuo1.PageIndex = e.NewPageIndex;

protected void GridEuo2_PageIndexChanging(object sender, GridViewPageEventArgs e)
    GridEuo2.PageIndex = e.NewPageIndex;

protected void GridEuo3_PageIndexChanging(object sender, GridViewPageEventArgs e)
    GridEuo3.PageIndex = e.NewPageIndex;

That's all. Run your project. You should see something like this:



  • 8th June, 2007: Original version posted
  • 18th Feb, 2008: Article updated
    • Apart from DropDownList, we may also use LinkButton controls


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Philippines Philippines
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
madhuP193628-Mar-13 4:21
membermadhuP193628-Mar-13 4:21 
QuestionNavigate to other page upon page index changes from Dropdown list. Pin
Member 417885016-Aug-11 21:03
memberMember 417885016-Aug-11 21:03 
GeneralExtending GridView Control: Using a DropDownList Pager Pin
After20503-Mar-10 23:43
memberAfter20503-Mar-10 23:43 
GeneralThanks Pin
liujd.net19-Dec-08 20:05
memberliujd.net19-Dec-08 20:05 
Generalvery simple but great article Pin
ravams21-Oct-08 2:01
memberravams21-Oct-08 2:01 
GeneralRe: very simple but great article Pin
mastereuo27-Oct-08 4:49
membermastereuo27-Oct-08 4:49 
GeneralExcellent implementation of code. thanks Pin
pushpakatt15-Jul-08 4:33
memberpushpakatt15-Jul-08 4:33 
GeneralThanks for a great component Pin
LuKas23_27-Mar-08 22:32
memberLuKas23_27-Mar-08 22:32 
Generalhelp furthur Pin
anuradha00916-Feb-08 1:27
memberanuradha00916-Feb-08 1:27 
GeneralRe: help furthur Pin
anuradha00916-Feb-08 1:30
memberanuradha00916-Feb-08 1:30 
GeneralRe: help furthur Pin
masterEUO18-Feb-08 8:17
membermasterEUO18-Feb-08 8:17 
QuestionPager row not sown Pin
Vadim Zaporozhets13-Sep-07 4:30
memberVadim Zaporozhets13-Sep-07 4:30 
GeneralRe: Pager row not sown Pin
masterEUO18-Feb-08 8:25
membermasterEUO18-Feb-08 8:25 
Generalif using datasource control [modified] Pin
Anders Cui9-Jul-07 2:34
memberAnders Cui9-Jul-07 2:34 
GeneralRe: if using datasource control Pin
masterEUO18-Feb-08 8:27
membermasterEUO18-Feb-08 8:27 
GeneralRe: if using datasource control [modified] Pin
jungle_king12-Dec-11 4:24
memberjungle_king12-Dec-11 4:24 
Generalno code behind for dll Pin
Chuckxxx21-Jun-07 11:18
memberChuckxxx21-Jun-07 11:18 
GeneralRe: no code behind for dll Pin
Anders Cui9-Jul-07 2:36
memberAnders Cui9-Jul-07 2:36 
Generalvirtual Pin
jariaman12-Jun-07 20:55
memberjariaman12-Jun-07 20:55 
GeneralRe: virtual Pin
masterEUO18-Feb-08 8:16
membermasterEUO18-Feb-08 8:16 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170422.1 | Last Updated 25 Feb 2008
Article Copyright 2007 by unchecked
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid