Question

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>).

Answer 1

If you really needed to use a datalist for some reason instead of implementing this as a repeater, you can try doing something like this:

<asp:DataList ID='dataList' runat='server' RepeatDirection='Horizontal' Width='100%' HorizontalAlign='Justify' RepeatLayout='Flow' OnItemDataBound='dataList_ItemDataBound'>     <HeaderTemplate>         <div>     </HeaderTemplate>     <SeparatorTemplate>         </div><div>     </SeparatorTemplate>     <ItemTemplate>         <%# Container.DataItem %></ItemTemplate>     <FooterTemplate>         </div></FooterTemplate> </asp:DataList> 

---

protected void dataList_ItemDataBound(object sender, DataListItemEventArgs e) {     if (e.Item.ItemType == ListItemType.Separator) {         if ((e.Item.ItemIndex + 1) % 3 != 0) {             e.Item.Controls.Clear();         }     } }