Create a new row for each third block in EPiServer 7

Question

I have a few a problem where I have three blocks thats added to a contentarea, and if ther user adds a fourth block, then I need to create a new row for the forth block since each row can only contain a maximum of three blocks..

The problem is that as far as I know, I cant itterate through the items within my contentarea since they are not the correct blocktypes (contentArea.Items is of the type IList) and even if I would itterate, then wouldnt that remove the on-page editing since the html doesnt really specify where to render my property?..

Any ideas?

Answer 1

It sounds like you are trying to reproduce the functionality of the ContentAreaRowBalancer class in the Alloy Mvc sample example:

The famed Joel Abrahamsson has several blog entries about the Alloy Mvc sample and here is a good place to start: http://world.episerver.com/Articles/Items/ASPNET-MVC-Templates-for-EPiServer-7-CMS/

• The BalancedContentAreaRenderer class is responsible for the actual rendering of content areas. However, to figure out how to divide content in an area into rows it uses an instance of…
• The ContentAreaRowBalancer class is where the actual logic for how content areas should be divided into rows, and how wide each content should be, resides.

Essentially the strategy they employ is to use (Bootstrap)[http://getbootstrap.com/] CSS to rearrange the Blocks into rows, as opposed to trying to introduce additional Blocks by controlling how Html is rendered. From the example image above, it would render as something like:

<div class="row">
    <div class="jumbotron">  <!-- 12 units wide -->
       ...
    </div>
</div>
<div class="row">
    <div class="4">  <!-- 4 units wide -->
         Alloy Plan Block
    </div>
    <div class="4">
         Alloy Track Block
    </div>
    <div class="4">
         Alloy Meet Block
    <div>
 </div>

If you were to add another block, the rendering algorithm would then add it to a new row:

 <div class="row">
     <div class="12"> <!-- 12 units wide if 1 block, will be changed to 6 if another block is added -->
        New Block
      </div>
 </div>