custom pagertemplate

The default pager mechanism inserts a table in the last row and then this table contains one row with as many cells as needed that contain page number (I set the page mode to numeric). Instead of having this nested table, I’d like to create a pagertemplate that consists of small square divs that are floated to the left of each other, with the page number inside each box.

How do you create a pager template like that?

Thanks

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Place a Repeater control inside the PagerTemplate as follows:

   <PagerTemplate>
        <asp:Repeater ID="repFooter" OnItemCommand="repFooter_ItemCommand" runat="server">
            <HeaderTemplate>
                <div class="pager">
            </HeaderTemplate>
            <ItemTemplate>
                <div class="page">
                    <asp:LinkButton ID="lnkPage" Text='<%# Container.DataItem %>' CommandName="ChangePage" CommandArgument="<%# Container.DataItem %>" runat="server" />
                </div>
            </ItemTemplate>
            <FooterTemplate>
                    <div class="clear"></div>
                </div>
            </FooterTemplate>
        </asp:Repeater>
    </PagerTemplate>

Then add an event handler for the Grid’s DataBound event which sets the datasource for the repeater as follows:

protected void GridView1_DataBound(object sender, EventArgs e)
{

    GridViewRow pagerRow = GridView1.BottomPagerRow;

    if (pagerRow != null)
    {

        Repeater repFooter = (Repeater)pagerRow.Cells[0].FindControl("repFooter");

        List<int> pages = new List<int>();

        for (int i = 0; i < GridView1.PageCount; i++)
        {
            pages.Add(i + 1);
        }

        repFooter.DataSource = pages;
        repFooter.DataBind();
    }
}

Add an event handler to handle the ItemCommand event of the repeater as follows:

protected void repFooter_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ChangePage")
    {
        GridView1.PageIndex = Convert.ToInt32(e.CommandArgument) - 1;
    }
}

Here is another sample on MSDN which replaces the default pager with a drop-down list:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx

Method 2

Here is another approach that uses the gridview’s built-in paging commands. This will also render a Label instead of a LinkButton on the grid’s current page.

Create a class that inherits from ITemplate as follows:

public class PagerTemplate: ITemplate
{
    private const string PAGE_COMMAND_NAME = "Page";

    public GridView AssociatedGridView { get; private set; }

    public PagerTemplate(GridView associatedGridView)
    {
        this.AssociatedGridView = associatedGridView;
    }

    public void InstantiateIn(Control container)
    {
        for (int i = 0; i < this.AssociatedGridView.PageCount; i++)
        {
            Panel pnlBox = new Panel();

            if (this.AssociatedGridView.PageIndex != i)
            {
                LinkButton lnkPage = new LinkButton();
                lnkPage.Text = (i + 1).ToString();
                lnkPage.CommandName = PAGE_COMMAND_NAME;
                lnkPage.CommandArgument = (i + 1).ToString();
                pnlBox.Controls.Add(lnkPage);
            }
            else
            {
                Label lblPage = new Label();
                lblPage.Text = (i + 1).ToString();
                pnlBox.Controls.Add(lblPage);
            }

            container.Controls.Add(pnlBox);
        }
    }
}

Then in the page Init event do the following:

protected void Page_Init(object sender, EventArgs e)
{
    GridView1.PagerTemplate = new PagerTemplate(GridView1);
}

Using this approach, you can also add previous, next, first and last page buttons by settings their CommandName to “Prev”, “Next”, “First” and “Last”.

Method 3

Another approach is to style the pager table itself.

Add a CSS class to the pager as follows:

<asp:GridView ... >
   <PagerStyle CssClass="pager" />
</asp:GridView>

This will add a class to the pager table row.

Now set the CSS style to select the TD that contains the page number as follows:

tr.pager td table td
{
    margin: 2px;
    width: 10px;
    padding: 0px 3px 0px 3px;
    background-color: #FBFBFB;
    text-align: center;
    border: solid 1px #CACACA;
}

Method 4

I would use a repeater and take fine control over that. Everybody reaches a point where the curve flips between convenience and fine control, and it looks like you’ve hit it.

If you really wanted to mimic the pager, you could wrap the repeater in your own user control and then raise the same events.

Method 5

Short addition to marzouka’s answer:

Using this approach, you can also add previous, next, first and last page buttons by settings their CommandName to “Prev”, “Next”, “First” and “Last”.

To implement previous, next, first and last page buttons, you have to change the CommandArgument… The CommandName must still be “Page”

e.G.

        LinkButton firstButton = new LinkButton();
        firstButton.CommandName = "Page";
        firstButton.CommandArgument = "First";
        firstButton.Text = "First";
        container.Controls.Add(firstButton);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0