ASP.NET DataList - defining "columns/rows" when repeating horizontal and using flow layout

Posted by Ian Robinson on Stack Overflow See other posts from Stack Overflow or by Ian Robinson
Published on 2009-01-16T02:47:35Z Indexed on 2010/03/25 1:23 UTC
Read the original article Hit count: 872

Filed under:
|
|
|

Here is my DataList:

<asp:DataList id="DataList" Visible="false" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" runat="server">
        [Contents Removed]
</asp:DataList>

This generates markup that has each item wrapped in a span. From there, I'd like to break each of these spans out into rows of three columns. Ideally I would like something like this:

<div>
 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
</div>
<div>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
</div>
[etc]

The closest I can get to this is to set RepeatColumns to "3" and then a <br> is inserted after every three items in the DataList.

 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
<br>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
<br>

This gets me kind of close, but really doesn't do the trick - I still can't control the layout the way I'd like to be able to.

Can anyone suggest a way to make this better? If I could implement the above example - that would be perfect, however I'd accept a less elegant solution as well - as long as its more flexible than <br> (such as inserting a <span class="clear"></span> instead of <br>).

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about datalist