UniPager

The UniPager is a universal paging control that can ensure paging for any control that implements theIUniPageableinterface. This includes the following Basic and Generic controls:

• BasicDataList
• BasicRepeater
• BasicUniView
• UniView

As well as the following CMS controls:

• CMSDataList
• CMSRepeater
• QueryDataList
• QueryRepeater

protected void Page_Load(object sender, EventArgs e)
{
    QueryRepeater1.DataBind();       
}

The UniPager is also built into the CMSUniView and QueryUniView controls and can be enabled by their EnablePaging property.

Getting started

The following is a step-by-step tutorial that shows how to add a page to a CMSRepeater control that displays all pages (menu items) in the system:

1. Create a new Web form somewhere in your web project.

2. Drag the CMSRepeater control from the toolbox onto the form.

3. Set the following properties for the CMSRepeater:

   • Path: /%
   • ClassNames: cms.menuitem
   • DelayedLoading: True
   • OrderBy: NodeLevel, NodeOrder (when connecting a UniPager, we strongly recommend explicitly setting the order of the displayed data items)

4. Add the code marked by the CMSRepeater templates comments between the <cms:CMSRepeater> tags. The overall code of the CMSRepeater control should look like this:

   Copy

   
   
   
    <cms:CMSRepeater ID="CMSRepeater1" runat="server" Path="/%" ClassNames="cms.menuitem" DelayedLoading="true" OrderBy="NodeLevel, NodeOrder">
   
        <%-- CMSRepeater templates ---------------------------------------------------------- --%>                
   
        <ItemTemplate>
            <%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("NodeAliasPath"))) %>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <font color="#999999">
                <%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("NodeAliasPath"))) %>    
            </font>
        </AlternatingItemTemplate>
        <SeparatorTemplate>
            <br />
        </SeparatorTemplate>
   
    <%-- CMSRepeater templates ----------------------------------------------------------- --%>
   
    </cms:CMSRepeater>
   
   
    

   This sets the templates used by the CMSRepeater to display the pages (menu items). The control dynamically replaces the <%#  … %> tags with values of the currently displayed record. This is repeated for every record in the data source.

5. Drag a UniPager control from the toolbox onto the form one line below the CMSRepeater.

6. Set the UniPager’s PageControl property to CMSRepeater1.

7. Set the GroupSize property to 10.

8. Add the code marked by the UniPager templates comments between the <cms:UniPager> tags. The overall code of the UniPager control should look like this:

   Copy

   
   
   
    <cms:UniPager ID="UniPager1" runat="server" PageControl="CMSRepeater1" GroupSize="10">
   
        <%-- UniPager templates ----------------------------------------------------------- --%>
   
            <PageNumbersTemplate>
                <a href="<%# Eval("PageURL") %>"><%# Eval("Page") %></a>
            </PageNumbersTemplate>
   
        <%-- UniPager templates ----------------------------------------------------------- --%>
   
    </cms:UniPager>
   
   
    

   This sets the minimum required template that enables the UniPager with a very simple design. Please see the UniPager section to learn about the more advanced templates.

9. Save the web form.

10. Right-click the web form in the Solution explorer and select View in Browser.

The control displays a pager under the list.

To make the pager fully functional, continue in the UniPager section.

Configuration

You can set the following properties for the UniPager control:

Appearance and styling

The appearance of the UniPager control is determined by the code of its item templates. You can define the following templates within the UniPager tags:

<strong><%# Eval("Page") %></strong>

Page
<asp:TextBox ID="DirectPageControl"
runat="server" Style="width: 25px;" />
of
<%# Eval("Pages") %>

<a href="<%# Eval("FirstURL") %>">|&lt;</a>

<a href="<%# Eval("LastURL") %>">&gt;|</a>

<a href="<%# Eval("NextGroupURL") %>">...</a>

<a href="<%# Eval("NextURL") %>">&gt;</a>

 

<a href="<%# Eval("PageURL") %>"><%# Eval("Page") %></a>

<a href="<%# Eval("PreviousGroupURL") %>">...</a>

<a href="<%# Eval("PreviousURL") %>">&lt;</a>

Full structure example

The following example shows how the UniPager control looks when all of its templates are defined.

1. Add the code marked by the UniPager templates comments between the <cms:UniPager> tags. The overall code of the UniPager control should look like this:

   Copy

   
   
   
    <cms:UniPager ID="UniPager1" runat="server" PageControl="CMSRepeater1">
   
        <%-- UniPager templates ------------------------------------------------------ --%>
   
        <PageNumbersTemplate>
            <a href="<%# Eval("PageURL") %>"><%# Eval("Page") %></a>
        </PageNumbersTemplate>         
        <CurrentPageTemplate>
            <strong><%# Eval("Page") %></strong>
        </CurrentPageTemplate>
        <PageNumbersSeparatorTemplate>
            &nbsp;-&nbsp;
        </PageNumbersSeparatorTemplate>
        <FirstPageTemplate>
            <a href="<%# Eval("FirstURL") %>">|&lt;</a>
        </FirstPageTemplate>
        <LastPageTemplate>
            <a href="<%# Eval("LastURL") %>">&gt;|</a>
        </LastPageTemplate>
        <PreviousPageTemplate>
            <a href="<%# Eval("PreviousURL") %>">&lt;</a>
        </PreviousPageTemplate>                  
        <NextPageTemplate>
            <a href="<%# Eval("NextURL") %>">&gt;</a>
        </NextPageTemplate>   
        <PreviousGroupTemplate>
            <a href="<%# Eval("PreviousGroupURL") %>">...</a>
        </PreviousGroupTemplate>
        <NextGroupTemplate>
            <a href="<%# Eval("NextGroupURL") %>">...</a>
        </NextGroupTemplate>
        <DirectPageTemplate>
            Page
            <asp:TextBox ID="DirectPageControl" runat="server" Style="width: 25px;" />
            of
            <%# Eval("Pages") %>
        </DirectPageTemplate>  
        <LayoutTemplate>
            <asp:PlaceHolder runat="server" ID="plcFirstPage"></asp:PlaceHolder>
            <asp:PlaceHolder runat="server" ID="plcPreviousPage"></asp:PlaceHolder>&nbsp;
            <asp:PlaceHolder runat="server" ID="plcPreviousGroup"></asp:PlaceHolder>
            <asp:PlaceHolder runat="server" ID="plcPageNumbers"></asp:PlaceHolder>
            <asp:PlaceHolder runat="server" ID="plcNextGroup"></asp:PlaceHolder>&nbsp;
            <asp:PlaceHolder runat="server" ID="plcNextPage"></asp:PlaceHolder>
            <asp:PlaceHolder runat="server" ID="plcLastPage"></asp:PlaceHolder>
            <br />
            <asp:PlaceHolder runat="server" ID="plcDirectPage"></asp:PlaceHolder>    
        </LayoutTemplate>   
   
        <%-- UniPager templates ------------------------------------------------------ --%>
   
    </cms:UniPager>
   
   
    

2. Save the web form.

3. Right-click the web form in the Solution explorer and select View in Browser.

The resulting page contains a pager like in the following diagram: