Click here to Skip to main content
Click here to Skip to main content
Go to top

Extending GridView Control: Using a DropDownList Pager

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

Introduction

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.

GridViewDropDownPager1.png

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);
    }
    else
    {
        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
            cell_1.Controls.Add(PageOf());

            // our DropDownList control here.
            cell_1.Controls.Add(ddl);

            // and our Total number of Pages
            cell_1.Controls.Add(PageTotal());
        }
        else
        {
            // 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
            cell_1.Controls.Add(first);
            // add the Prev button
            cell_1.Controls.Add(prev);
            // add the Next button
            cell_1.Controls.Add(next);
            // add the Last button
            cell_1.Controls.Add(last);
        }

        // 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();
        cell_2.Controls.Add(PageInfo(pagedDataSource.DataSourceCount));

        // add now the 2 cells to our created row
        tbl.Rows[0].Cells.Add(cell_1);
        tbl.Rows[0].Cells.Add(cell_2);
        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
        (int.Parse(((LinkButton)sender).CommandArgument)));
}

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
            (((DropDownList)sender).SelectedIndex));
}

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.

[Category("Paging")]
[DefaultValue("1")]
public ThisPagerType PagerType
{
    get
    {
        return (ViewState["PagerType"] != null ?
            (ThisPagerType)ViewState["PagerType"] : ThisPagerType.DropDownList);
    }
    set
    {
        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);
}
else
{
    if (PagerType == ThisPagerType.DropDownList)
    {
        // our Pager with DropDownList control
    }
    else
    {
        // 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.

GridViewDropDownPager2.png

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.

GridViewDropDownPager4.png

Add this in the code-behind..

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    // I am using 'Products' table of the 'Northwind' database
    SqlConnection cn = new SqlConnection
        ("server=(local);database=northwind;uid=sa;pwd=;");
    string q = "select productname, quantityperunit from products";
    DataSet ds = new DataSet();
    SqlDataAdapter da = new SqlDataAdapter(q, cn);
    cn.Open();
    da.Fill(ds);

    // the 1st GridEuo
    GridEuo1.DataSource = ds;
    GridEuo1.DataBind();

    // the 2nd GridEuo
    GridEuo2.DataSource = ds;
    GridEuo2.DataBind();

    // the 3nd GridEuo
    GridEuo3.DataSource = ds;
    GridEuo3.DataBind();

    cn.Close();
}

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

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

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

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

GridViewDropDownPager3.png

History

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

License

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

Share

About the Author

unchecked
Software Developer
Philippines Philippines
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmembermadhuP193628-Mar-13 4:21 
QuestionNavigate to other page upon page index changes from Dropdown list. PinmemberMember 417885016-Aug-11 21:03 
GeneralExtending GridView Control: Using a DropDownList Pager PinmemberAfter20503-Mar-10 23:43 
GeneralThanks Pinmemberliujd.net19-Dec-08 20:05 
Generalvery simple but great article Pinmemberravams21-Oct-08 2:01 
GeneralRe: very simple but great article Pinmembermastereuo27-Oct-08 4:49 
GeneralExcellent implementation of code. thanks Pinmemberpushpakatt15-Jul-08 4:33 
GeneralThanks for a great component PinmemberLuKas23_27-Mar-08 22:32 
Generalhelp furthur Pinmemberanuradha00916-Feb-08 1:27 
GeneralRe: help furthur Pinmemberanuradha00916-Feb-08 1:30 
GeneralRe: help furthur PinmembermasterEUO18-Feb-08 8:17 
QuestionPager row not sown PinmemberVadim Zaporozhets13-Sep-07 4:30 
GeneralRe: Pager row not sown PinmembermasterEUO18-Feb-08 8:25 
Generalif using datasource control [modified] PinmemberAnders Cui9-Jul-07 2:34 
GeneralRe: if using datasource control PinmembermasterEUO18-Feb-08 8:27 
GeneralRe: if using datasource control [modified] Pinmemberjungle_king12-Dec-11 4:24 
Generalno code behind for dll PinmemberChuckxxx21-Jun-07 11:18 
GeneralRe: no code behind for dll PinmemberAnders Cui9-Jul-07 2:36 
Generalvirtual Pinmemberjariaman12-Jun-07 20:55 
GeneralRe: virtual PinmembermasterEUO18-Feb-08 8:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 25 Feb 2008
Article Copyright 2007 by unchecked
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid