Kentico CMS Repeater - UniPager

• BasicDataList
• BasicRepeater
• BasicUniView
• UniView

• CMSDataList
• CMSRepeater
• QueryDataList
• QueryRepeater

Note

If you place the UniPager control after the attached listing control, that control must bind its data later in the page life cycle than during the Init event. Otherwise the UniPager does not apply paging.

For the CMSDataList and CMSRepeater controls, you can solve this issue by setting the DelayedLoading property to true.

The QueryDataList and QueryRepeater controls do not have the DelayedLoading property, but you can ensure that paging is applied correctly by setting their DataBindByDefault property to false and manually calling their Databind() method during the Load event:

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.

Web part equivalent (portal engine): Universal pager

On this page 

• Getting started
• Configuration
• Appearance and styling 
• Full structure example

• Implementing the IUniPageable interface
• Paging data

Getting started

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:

5.    <cms:CMSRepeater ID="CMSRepeater1" runat="server" Path="/%" ClassNames="cms.menuitem" DelayedLoading="true" OrderBy="NodeLevel, NodeOrder">

The control displays a pager under the list.



To make the pager fully functional, continue in the Full structure example 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:

 

Page

<asp:TextBox ID="DirectPageControl"

runat="server" Style="width: 25px;" />

of

Full structure example

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

Note: If you wish to create the example for yourself, first follow the tutorial in the Getting started section up to and including step 5.

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:
2.    <cms:UniPager ID="UniPager1" runat="server" PageControl="CMSRepeater1">
3.    
4.        <%-- UniPager templates ------------------------------------------------------ --%>
5.            
6.        <PageNumbersTemplate>
7.            <a href="<%# Eval("PageURL") %>"><%# Eval("Page") %></a>
8.        </PageNumbersTemplate>         
9.        <CurrentPageTemplate>
10.            <strong><%# Eval("Page") %></strong>
11.        </CurrentPageTemplate>
12.        <PageNumbersSeparatorTemplate>
13.            &nbsp;-&nbsp;
14.        </PageNumbersSeparatorTemplate>
15.        <FirstPageTemplate>
16.            <a href="<%# Eval("FirstURL") %>">|&lt;</a>
17.        </FirstPageTemplate>
18.        <LastPageTemplate>
19.            <a href="<%# Eval("LastURL") %>">&gt;|</a>
20.        </LastPageTemplate>
21.        <PreviousPageTemplate>
22.            <a href="<%# Eval("PreviousURL") %>">&lt;</a>
23.        </PreviousPageTemplate>                  
24.        <NextPageTemplate>
25.            <a href="<%# Eval("NextURL") %>">&gt;</a>
26.        </NextPageTemplate>   
27.        <PreviousGroupTemplate>
28.            <a href="<%# Eval("PreviousGroupURL") %>">...</a>
29.        </PreviousGroupTemplate>
30.        <NextGroupTemplate>
31.            <a href="<%# Eval("NextGroupURL") %>">...</a>
32.        </NextGroupTemplate>
33.        <DirectPageTemplate>
34.            Page
35.            <asp:TextBox ID="DirectPageControl" runat="server" Style="width: 25px;" />
36.            of
37.            <%# Eval("Pages") %>
38.        </DirectPageTemplate>  
39.        <LayoutTemplate>
40.            <asp:PlaceHolder runat="server" ID="plcFirstPage"></asp:PlaceHolder>
41.            <asp:PlaceHolder runat="server" ID="plcPreviousPage"></asp:PlaceHolder>&nbsp;
42.            <asp:PlaceHolder runat="server" ID="plcPreviousGroup"></asp:PlaceHolder>
43.            <asp:PlaceHolder runat="server" ID="plcPageNumbers"></asp:PlaceHolder>
44.            <asp:PlaceHolder runat="server" ID="plcNextGroup"></asp:PlaceHolder>&nbsp;
45.            <asp:PlaceHolder runat="server" ID="plcNextPage"></asp:PlaceHolder>
46.            <asp:PlaceHolder runat="server" ID="plcLastPage"></asp:PlaceHolder>
47.            <br />
48.            <asp:PlaceHolder runat="server" ID="plcDirectPage"></asp:PlaceHolder>    
49.        </LayoutTemplate>   
50.        
51.        <%-- UniPager templates ------------------------------------------------------ --%>
52.          
</cms:UniPager>

53. Save the web form.
54. 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: