Search code examples
transformationkenticoascx

Custom Transformation in Unipager Control

i don't need default layout of unipager so took the custom transformation. how to render the page numbers in ascx transformation my code is following 

<div class="container text-center">

<li><a href="/About/Press-Release" aria-label="First"><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></a></li>
<li><a href="/About/Press-Release" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></a></li>
<li class="active"><a href="/About/Press-Release">1<span class="sr-only">(current)</span></a></li>


<li><a href="/About/Press-Release?page=2" aria-label="Next"><span aria-hidden="true"><i class="fa fa-angle-right"></i></span></a></li>
<li><a href="/About/Press-Release?page=3" aria-label="Last"><span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span></a></li>

</div>

it rendering like My code rendering like

but it not rendering remaining pages Anyone tell me what mistake i did or solution to render next pages like AboveActual design

Solution

  • Uni pager requires a list of transformation

    enter image description here

    Result you're getting is exactly what you have in markup. 

    <li><a href="/About/Press-Release" aria-label="First"><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></a></li>

    Above line should be First page transformation

    <li><a href="/About/Press-Release" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></a></li>

    Previous page transformation

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

    Pages transformation (this is what you're missing)

    Just continue like this other transformations.

    Hope this helps