Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Laying Out Items in Rows and Columns


Reply


419 Views

Avatar
elgordo

Community Member, 70 Posts

19 November 2012 at 1:31am

Edited: 19/11/2012 1:36am

hi

I came across a problem recently where I wanted to lay items out in rows of 3 or 4 items wide, in this case for use with twitter bootstrap. The templating language has been made deliberately to make logic in the templates difficult and push it back to the controller, which I think is a strength of SilverStripe. In this case though I was scratching my head for a bit.

The approach I took was this - split a DataSet into rows of a predetermined number of columns and enable iteration over each row and column in a template.

The syntax I eventually settled on can be seen in this example:

<h1>$Title</h1>
$Content
<% control SplitSetIntoGridRows(AllChildren|3) %>
<div class="row">
<% control Columns %>
<div class="span3"><h4><a href="$Link">$Title
<a href="$Link"><% control Screenshot.SetWidth(300) %><img src="$URL" alt="$Title"/><% end_control %></a>
</h4>
</div><!-- end of span 4 -->
<% end_control %>
</div><!-- end of row -->
<% end_control %>

The most important line is this:

<% control SplitSetIntoGridRows(AllChildren|3) %>

The parameters are the method to obtain the DataObjectSet (in this case, AllChildren, returning all the child elements), and the column width in this case 3. Within this control loop the column items are accessible by

<% control Columns %>


Within this loop you will have access to the individual items from the DataObjectSet and can render them as you wish.

Further information about the module can be be found at [url=http://weboftalent.asia/blog/grid-rows-module/]Web of Talent - Grid Rows Module[/url]

Cheers

Gordon