How to create Bootstrap styled pager in Kentico CMS

How to create Bootstrap styled pager in Kentico CMS

There is no doubt Kentico is an excellent CMS, but one of the areas that could use a little sprucing is the default pagination when lists of items are paged. Luckily, one of the areas Kentico excels is its felxibility and ease of customisation. A very popular framework for front-end design and development is Bootstrap and a large number of Kentico themes are built on it. In this post we look at how to create a Bootstrap styled pager in Kentico.

We begin by looking at the default pager that is displayed in Kentico CMS. If you want to know how to setup paging in Kentico, you can find more information in the "Filtering and Paging data" documentation. The image below shows a list with the default Kentico pager.
 

A list with the default Kentico pager

Let's get started and transform our pager. This guide uses the Universal Pager web part. In the data listing webpart e.g. Repeater, ensure that paging option is not enabled. The paging will be provided by the universal pager.

  1. Add a Universal pager web part

    Drag a universal pager web part and place it in the zone you want it to display.

    Universal pager web part added to page

  2. Configure the web part

    Click the options icon to configure the web part. Under Pager Properties, set the Target control name to the ID of the repeater. Set the other properties such as page size and paging mode. Next we move to the Design section.

  3. Create new transformations

    In the Design section, we see a list of transformation properties. This is where the pager HTML markup is defined and the transformations we create will modify the markup to match Bootstrap's markup.

    The default transformations defined for the Universal pager web part

    We proceed to create the following transformations by clicking on the New button next to each transformation property. This displays the new transformation modal as shown in the image below. In the modal fill in the transformation name, transformation type and code as listed below. The last transformation - "Pager layout transformation" goes in the Layout section just after the design section.

    1. Pages transformation
      Transformation name: Bootstrap-Pages
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("PageURL", true) %>"><%# Eval("Page") %></a>
      </li>
      
    2. Current page transformation
      Transformation name: Bootstrap-CurrentPage
      Transformation type: ASCX
      Transformation code
      <li class="active">
      	<span><%# Eval("Page") %> <span class="sr-only">(current)</span></span>
      </li>
      
    3. Page separator transformation
      Transformation name: Bootstrap-PageSeparator
      Transformation type: Text / XML
      Transformation code
      {% String.Empty %}
      
    4. First page transformation
      Transformation name: Bootstrap-FirstPage
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("FirstURL",true) %>">|&lt;</a>
      </li>
      
    5. Last page transformation
      Transformation name: Bootstrap-LastPage
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("LastURL", true) %>">&gt;|</a>
      </li>
      
    6. Previous page transformation
      Transformation name: Bootstrap-PreviousPage
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("PreviousURL", true) %>">&lt;</a>
      </li>
      
    7. Next page transformation
      Transformation name: Bootstrap-NextPage
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("NextURL", true) %>">&gt;</a>
      </li>
      
    8. Previous group transformation
      Transformation name: Bootstrap-PreviousGroup
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("PreviousGroupURL", true) %>">...</a>
      </li>
      
    9. Next group transformation
      Transformation name: Bootstrap-NextGroup
      Transformation type: ASCX
      Transformation code
      <li>
      	<a href="<%# Eval("NextGroupURL", true) %>">...</a>
      </li>
      
    10. Pager layout transformation
      Transformation name: Bootstrap-PagerLayout
      Transformation type: ASCX
      Transformation code
      <ul class="pagination">
      	<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>
      	<asp:PlaceHolder runat="server" ID="plcDirectPage"></asp:PlaceHolder>
      	<li>
      		<span>Pages:  <%# Eval("CurrentPage") %> of <%# Eval("Pages") %></span>
      	</li>
      </ul>
      

When done, our web part configuration should look like the image below. Save the changes. 

The newly created bootstrap transformations for the Universal pager web part

We should now be able to see our new pager and it should look like the one in the image below. You can go ahead and style it to match your theme's colors. If the pager does not render properly, ensure that you have properly linked the bootstrap css file on your page.  Hope this helps!

Our list now uses the bootstrap styled pager

Posted by 'dipo Majekodunmi

'dipo Majekodunmi
I am a technology enthusiast passionate about helping businesses solve problems using technology.

Comments

comments powered by Disqus