Forums (Obsolete)

Member

Jerreck - 8/22/2013 9:04:26 AM

Applying HTML tags after X number of items are retrieved from a custom table by a repeater.

I have a custom table for a small site my organization is working on that contains information about some of our upcoming events; specifically, the name of the location, the address, and then a link to Google Maps so that our users can get directions.

I am displaying this data with a repeater. The data pulls, displays, and works correctly according to the transformation I've built:

<a href="<%# Link %>" class="col-out span3" target="_blank">
  <div class="col-btn pagination-centered">
    <h2><%# Location %></h2>
    <p class="lead"><%# Address %></p>
    <p><%# City %>, <%# State %> <%# ZIP %></p>
    <span class="glyphicon glyphicon-map-marker glyphicon-huge"></span>
  </div>
</a>

However, I'd like to able to wrap every 4 records that are output by this transformation in <div> tags so that I can apply some more CSS styles that will lay them out neatly in rows of 4 on the page.

Would it be easier to do this with C# in the transformation, or would this be a good example of when to use a hierarchical transformation?


Kentico Legend	Brenden Kehren - 8/22/2013 11:32:29 AM RE:Applying HTML tags after X number of items are retrieved from a custom table by a repeater. Try this out (make modifications as necessary) // three up <%# ((DataItemIndex + 1) % 3 == 0 ? "</div><div class=\"row\">" : "") %> // two up <%# ((DataItemIndex + 1) % 2 == 0 ? "</div><div class=\"row\">" : "") %>

Member

Jerreck - 8/30/2013 10:41:40 AM

RE:Applying HTML tags after X number of items are retrieved from a custom table by a repeater.

Sorry for the late reply, but thank you for the help! We did some modifications based on your recommendation and it works great.

Posting it here in case someone else tries the same in the future. We were using the responsive grid from Bootstrap version 2.3.2 at the time. If my explanation seems too verbose, its because I'm thinking from the perspective of someone like me who is very new to programming. Please feel free to correct me if what I think is happening in this transformation is not what is actually happening :)

Here's the whole transformation:


{% DataItemIndex == 0 ? "<section class=\"container-fluid\"><div class=\"row-fluid\"><div class=\"span1 offset\"></div>":""%}
<a href="{% Link %}" class="col-out span3" target="_blank">
  <div class="col-btn pagination-centered">
    <p class="lead">{% Location %}</p>
    <p>{% Address %}</p>
    <p>{% City %}, {% State %} {% ZIP %}</p>
    <span class="glyphicon glyphicon-map-marker glyphicon-huge"></span>
  </div>
</a>
{% itemcount = DataItemIndex+1; if(itemcount mod 3){""}else{"</div><div class=\"row-fluid\"><div class=\"span1 offset\"></div>"} %}

NOTE: We were originally trying to use modulus with the '%' symbol. We spent about thirty minutes trying to figure out why the expression was converting our numbers to percents instead of checking to see if it had a remainder. Apparently, one caveat of K# is that it uses the % sign to multiply a value by 0.01 rather than find the remainder of a value.

Member

Jason - 2/18/2014 10:46:32 AM

RE:Applying HTML tags after X number of items are retrieved from a custom table by a repeater.

I need to this as well but I am not understanding the concept here.

I need to wrap every third data item from a repeater in the following html tags

I need to achieve this:

<div class="row">

<div class="col-lg-4 col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>

<div class="col-lg-4 col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="row">
<div class="col-lg-4 col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>

</div>
<div class="row">
<div class="col-lg-4 col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-lg-4 col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-lg-4 col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>

So every third row needs to be altered in my transformation?