Jump to:

10993 Posts in 2727 Topics by 1818 members

All other Modules

SilverStripe Forums » All other Modules » Laying Out Items in Rows and Columns

Discuss all other Modules here.

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

Page: 1
Go to End
Author Topic: 376 Views
  • elgordo
    Community Member
    70 Posts

    Laying Out Items in Rows and Columns Link to this post


    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:

    <% 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>
    </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 Web of Talent - Grid Rows Module



Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.