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

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   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   (such as inserting a  instead of  ).

DavGarcia · Accepted Answer · 2009-01-16 03:41:19Z

3

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

answered Jan 16, 2009 at 3:41

DavGarcia

18.9k14 gold badges62 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ian Robinson Over a year ago

Thanks David. This solution will work, but what about the repeater makes this so much easier to implement? Thanks again.

DavGarcia Over a year ago

You'd actually use the exact some approach but with a Repeater. The DataList has overhead involved for doing things like rendering content in tables, which you are trying to usurp. Also it is derived from a WebControl whereas the Repeater is derived from Control.

Ian Robinson Over a year ago

Thanks David, I implemented this as my solution (using a repeater). I appreciate the help.

Mike Robinson · Accepted Answer · 2009-01-16 03:26:01Z

1

I may be confused, but why not just use a repeater and a custom item template?

answered Jan 16, 2009 at 3:26

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

1 Comment

Ian Robinson Over a year ago

Maybe I've been staring at my computer too long today (well, I know I have...) but I'm not seeing any easy solution with a repeater either, I'd welcome an example of this as well. I believe it would be reasonable for me to replace the DataList with a Repeater.

Ken Browning · Accepted Answer · 2009-01-16 05:23:27Z

1

You can achieve your desired layout using CSS without altering the original generated markup. Since span tags are displayed inline by default, switching to inline-block and specifying a width of 33% on those spans should do the trick.

Or more specifically, set the CssClass property of your DataList control to a value such as "threecolumns".

Define the following css style:

<style type="text/css">
.threecolumns span 
{
    display: inline-block;
    width: 33%;
}
</style>

VS2008 might tell you that inline-block isn't a valid setting for the display property. I wouldn't worry about that too much since almost every browser supports it.

answered Jan 16, 2009 at 5:23

Ken Browning

29.1k6 gold badges58 silver badges68 bronze badges

Comments

GDP · Accepted Answer · 2012-08-02 14:08:03Z

0

add this RepeatColumns="100000"

edited Aug 2, 2012 at 14:08

GDP

8,1636 gold badges48 silver badges84 bronze badges

answered Mar 25, 2010 at 1:18

ivica

1

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related