Custom pagment

Question

By default, the pager mechanism inserts a table into the last row, and then this table contains one row with as many cells as necessary, which contain the page number (I set the page mode to numeric). Instead of having this nested table, I would like to create a pagertemplate that consists of small square divs that move to the left of each other, with the page number inside each window.

How do you create a pager template?

thank

Answer 1

Place the 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 DataBound event, which sets up the data source 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();
    }
}

ItemCommand :

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

MSDN, : http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx

Answer 2

, gridview. Label LinkButton .

, ITemplate :

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);
        }
    }
}

Init :

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

, "", "", "" " " CommandName "Prev", "Next", "First" "Last".

Answer 3

.

CSS :

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

.

CSS TD, , :

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

Answer 4

. , , , .

, , .

Answer 5

:

, "", "", "" " " CommandName "Prev", "Next", "First" "Last".

To implement the previous, next, first and last buttons of a page, you need to change the CommandArgument ... The command name should still be "Page"

eg.

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