Group items in repeater with pagination enabled

Justin L asked on July 7, 2017 12:14

Hello Kentico guru's,

I am trying to create a repeater with paging enabled and in my transformation (ascx) group every 3 items in a new row. So far i found this article and had it working until i added the pagination.

This is the code i have now:

<% if((DataItemIndex % 3) == 0) { %>
<div class="row">
<% } %>

    <div class="output-block-goes-here column">
        This is a sample block
    </div>

<% if((DataItemIndex % 3) == 2 || DataItemCount-1 == DataItemIndex) { %>
</div>
<% } %>

Unfortunately this does not work with the pagination because the DataItemIndex on, for example the second page, resets and starts from 0 again. This way it will never be equal to the DataItemCount-1.

How can i retrieve info from the repeater, for example the amount of pages so i can calculate the last item and/or is there an easier way to check for the last item?

Thanks, Best regards,

Justin

Recent Answers

Trevor Fayas answered on July 7, 2017 15:30

You are correct, pagination is not displaying the items necessarily correct, also the IsFirst and IsLast do not show based on the current page.

A work around that I've used in the past is to not use rows, put every single item in it's own div, then use CSS to define the nth-child as a 'row' Somewhat hacky though.

/* make 3rd the end of a row */
.MyRepeaterContainer .MyItemRepeated:nth-child(3n+1) {
  clear:left;
}
/* Mobile, no wrap */
@media (max-width: 768px) {
    .MyRepeaterContainer .MyItemRepeated {
        clear:both;
    }
}

1 votesVote for this answer Mark as a Correct answer

Justin L answered on July 7, 2017 16:11

Thats unfortunate, i was hoping there was a way to retrieve information from the repeater / pagination (like currentpage, number of pages, etc.). For now i have managed to display my items in rows using flex-box.

Thank you for your help.

0 votesVote for this answer Mark as a Correct answer

Zach Perry answered on July 10, 2017 18:33 (last edited on July 10, 2017 22:43)

This is how I have done it (my example has 4 per row).

First you have to add a method to your transformation:

<script runat="server">
  public static bool IsCurrentItemLast(Control sender, int count, int index)
    {
        //get the repeater object        
        Control myParent = sender;
        while (myParent != null)
        {
            myParent = myParent.Parent;
            if (myParent is CMS.Controls.CMSRepeater)
            {
                CMS.Controls.CMSRepeater myRepeater = myParent as CMS.Controls.CMSRepeater;
                var currentPage = myRepeater.PagerControl.CurrentPage;
                var pageSize = myRepeater.PagerControl.PageSize;
               if( ((currentPage -1) * pageSize  + index +1) == count)
                 {
                 return true;
                 }

            }
        }
        return false;
    }
</script>

Then you can use this to start a row: <%# ( (DataItemIndex % 4 == 0) ? "<div class=\"row\">" : "" ) %> 

This to End the row if it's not the Last item <%# ( ( (DataItemIndex+1) % 4 == 0 && DataItemIndex != 0) ? "</div>" :"" ) %> 

And this to end the very last row: <%# IsCurrentItemLast(this, DataItemCount, DataItemIndex) ? "</div>" :""%>

2 votesVote for this answer Mark as a Correct answer