kentico ascx transformation, every nth

Question

Here's my transformation:

<%# IsFirst() ? "<div class='row'>" : "" %>

<div class='col-xs-12 col-md-3 col-bdlt'>
  <div class='bdlt lt'>
    <asp:PlaceHolder runat="server" Visible='<%# IfEmpty( Eval("Headshot"), false, true ) %>'>    
      <img src="<%# Eval("Headshot") %>" alt="<%# Eval("Name") %>" class='img-responsive'>
    </asp:PlaceHolder> 
    <p class='name'><%# Eval("Name") %><%# IfEmpty( Eval("Accolades"),"</p>",",</p> <p class='accolades'>" + Eval("Accolades") + "</p>" ) %>
    <p><%# Eval("Copy") %></p>    
  </div>  
</div>  

<%# IsLast() ? "</div>" : "" %>

I'm running Bootstrap, so i'm wrapping these elements in a row. Things are working, but depending on the amount of copy, it's not looking as it should. What i'd like do is have a row for each group of 4.

So like this

• Row
  • item
  • item
  • item
  • item
• Row
  • item etc.

So after every 4th, close the row div, and start a new one. I think my first line is good, it's the last where i think the logic is needed.

Answer 1

To start the row, you want to make sure the first record starts a row:

<%#  ( (DataItemIndex % 4 == 0) ? "<div class=\"row\">" : "" ) %> <!-- Start Row -->

To close the row, you want to make sure the last record ends the current row.

<%# (DataItemIndex % 4 == 3 || DataItemIndex == DataRowView.DataView.Count - 1 ? "</div>" : "") %>  <!-- Close Row -->

Answer 2

You want to utilize the DataItemIndex value, and do something like this, coupled with the Modulo

You compare the DataItemIndex %4 = 3 because DataItemIndex is 0 based, so the 4th, 8th, 12th rows have index of 3, 7, 11 which modulo 4 are all 3.