Extending GridView Control: Using a DropDownList Pager

• Download demo project - 7.77 KB
• Download source - 9.38 KB

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.

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.

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)
    {
        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:

History

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