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>
).
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();
}
}
}