--- title: UniPager related: - https://docs.kentico.com/k10/references/kentico-controls/generic-controls/paging-controls/unipager/implementing-the-iunipageable-interface.md - https://docs.kentico.com/k10/developing-websites/loading-and-displaying-data-on-websites/filtering-and-paging-data.md --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). The UniPager is a universal paging control that can ensure paging for any control that [implements theIUniPageableinterface](https://docs.kentico.com/k10/references/kentico-controls/generic-controls/paging-controls/unipager/implementing-the-iunipageable-interface.md). This includes the following Basic and Generic controls: - [BasicDataList](https://docs.kentico.com/k10/references/kentico-controls/basic-controls/basicdatalist.md) - [BasicRepeater](https://docs.kentico.com/k10/references/kentico-controls/basic-controls/basicrepeater.md) - [BasicUniView](https://docs.kentico.com/k10/references/kentico-controls/basic-controls/basicuniview.md) - [UniView](https://docs.kentico.com/k10/references/kentico-controls/generic-controls/uniview.md) As well as the following CMS controls: - [CMSDataList](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers/cmsdatalist.md) - [CMSRepeater](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers/cmsrepeater.md) - [QueryDataList](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers-with-custom-queries/querydatalist.md) - [QueryRepeater](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers-with-custom-queries/queryrepeater.md) > **Note:** **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: > > ```csharp > > protected void Page_Load(object sender, EventArgs e) > { > QueryRepeater1.DataBind(); > } > > ``` The UniPager is also built into the [CMSUniView](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers/cmsuniview.md) and [QueryUniView](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers-with-custom-queries/queryuniview.md) controls and can be enabled by their **EnablePaging** property. > **Info:** **Web part equivalent (portal engine)**: Universal pager ## 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 __ tags. The overall code of the CMSRepeater control should look like this: ```html <%-- CMSRepeater templates ---------------------------------------------------------- --%> <%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("NodeAliasPath"))) %> <%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("NodeAliasPath"))) %>
<%-- CMSRepeater templates ----------------------------------------------------------- --%> ``` > **Info:** 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 __ tags. The overall code of the UniPager control should look like this: ```html <%-- UniPager templates ----------------------------------------------------------- --%> "><%# Eval("Page") %> <%-- UniPager templates ----------------------------------------------------------- --%> ``` > **Info:** This sets the minimum required template that enables the UniPager with a very simple design. Please see the [UniPager](#appearance-and-styling) 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. ![](https://docs.kentico.com/docsassets/k10/unipager/image1.png) To make the pager fully functional, continue in the [UniPager](#full-structure-example) section. ## Configuration You can set the following properties for the UniPager control: | Common pager control properties | Description | | ------------------------------- | -------------------------------------------------- | | CurrentPage | The current page number. | | MaxPages | Maximum number of pages that the control displays. | | PageCount | The current number of pages (read only). | | PageSize | The number of displayed items per page. | | UniPager properties | Description | Sample value | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | | DataSourceItemsCount | The amount of items in the data source. | | | DirectPageControlID | The ID of the control used for direct page changing. | | | DisplayFirstLastAutomatically | If enabled, the first and last buttons of the pager will be displayed only when there is no other way of accessing the first or last page through the pager. | | | DisplayPreviousNextAutomatically | If enabled, the previous and next buttons of the pager will be displayed only when there is no other way of accessing the previous or next page through the pager. | | | EnvelopeTag | The current envelope tag. | | | GroupSize | The amount of page links displayed in one group. | | | HidePagerForSinglePage | If true, the pager is hidden if only one page is displayed. | | | HTMLEnvelopeRenderingMode | The HTML envelope rendering mode for the current page. | "Always"
"Never"
"OnlyForUpdatePanel" | | PageControl | The ID of the control to be paged. | | | PagedControl | The object of the control to be paged. | | | PagerMode | Determines the type of the used paging parameter. It can either be passed through the URL (QueryString) or through postback (PostBack). | "PostBack"
"QueryString" | | QueryStringKey | Name of the query string parameter that contains the current page number. This is useful if there are multiple UniPager controls on the same page. | "pagenumber" | | RelatedData | Custom data connected to the object. | | ## 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: | Template name | Description | Sample value | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | CurrentPageTemplate | Template used for the current page in the pager.
Use the following in-line code in the template:
__ - gets the current page number.
__ - gets the page URL
__ - creates a link to the page | ` <%# Eval("Page") %>` | | DirectPageTemplate | Template used for direct page changing.
Use a **TextBox** or **DropDownList** control with ID _DirectPageControl_ to register the page change event. | ` Page of <%# Eval("Pages") %>` | | FirstPageTemplate | Template used for the link to the first page in the pager.
Use __ to get the link to the first page. | ` ">\|<` | | LastPageTemplate | Template used for the link to the last page in the pager.
Use __ to get the URL of the last page. | ` ">>\|` | | LayoutTemplate | Template that determines the overall design of the pager. | | | NextGroupTemplate | Template used for the link to the next group of pages.
Use __ to get the URL of the next group. | ` ">...` | | NextPageTemplate | Template used for the link to the next page.
Use __ to get the URL of the next page. | ` ">>` | | PageNumbersSeparatorTemplate | Template used for the separator between page links in the pager. | `  ` | | PageNumbersTemplate | Template used for page links in the pager.
Use the following in-line code in the template:
__ - gets the page number
__ - gets the URL of the page
__ - creates a link to the page | ` "><%# Eval("Page") %>` | | PreviousGroupTemplate | Template used for the link to the previous group of pages.
Use __ to get the URL of the next group. | ` ">...` | | PreviousPageTemplate | Template used for the link to the previous page.
Use __ to get the URL of the next page. | ` "><` | ### Full structure example The following example shows how the UniPager control looks when all of its templates are defined. > **Note:** **Note**: If you wish to create the example for yourself, first follow the tutorial in the [UniPager](#getting-started) section up to and including step **5**. 1. Add the code marked by the **UniPager templates** comments between the tags. The overall code of the UniPager control should look like this: ```html <%-- UniPager templates ------------------------------------------------------ --%> "><%# Eval("Page") %> <%# Eval("Page") %>  -  ">|< ">>| ">< ">> ">... ">... Page of <%# Eval("Pages") %>    
<%-- UniPager templates ------------------------------------------------------ --%> ``` 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: ![](https://docs.kentico.com/docsassets/k10/unipager/image.png) | UniPager section | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Layout Template | Determines the overall design of the displayed pager.
To place the locations of individual templates into the layout, use PlaceHolder controls with their _ID_ properties set according to the names of the templates, e.g. _plcFirstPage_ for the _FirstPageTemplate_.
The content of individual pages is dependent on the listing control connected to the UniPager. Set the maximum number of items displayed per page through the UniPager control's **PageSize** property. | | Page | Defined by the code of the **PageNumbersTemplate**. It is usually used to display the general page links of the pager. The amount of displayed page links can be set by the UniPager control's **GroupSize** property. | | Current page | Defined by the code of the **CurrentPageTemplate**. It is usually used to display the number of the currently selected page. | | Direct page | Defined by the code of the **DirectPageTemplate**. It is usually used to display a control that allows direct switching between pages. The ID property of the used control must be set to _**DirectPageControl**_ as in the example. | | Separator | Defined by the code of the **PageNumbersSeparatorTemplate**. It is placed between every page number in the pager. | | First/Last page | These areas are defined by the code of the **FirstPageTemplate** and **LastPageTemplate**. They are usually used to display links to the first and last page of the pager. If the UniPager control's **DisplayFirstLastAutomatically** property is set to true, this area is only shown when there is no other way of accessing the first or last page through the pager. | | Next/Previous page | These areas are defined by the code of the **NextPageTemplate** and **PreviousPageTemplate**. They are usually used to display links to the next and previous page of the pager. If the UniPager control's **DisplayPreviousNextAutomatically** property is set to true, this area is only shown when there is no other way of accessing the previous or next page through the pager. | | Next/Previous group | These areas are defined by the code of the **NextGroupTemplate** and **PreviousGroupTemplate**. They are usually used to display links to the next and previous group of pages. |