Question

I have an ASP ListView displaying some items with GroupItemCount set to 3:

A  D  G
B  E  H
C  F  I

i.e. it groups them vertically in columns. How do I make it display so that it groups horizontally in rows thus?

A  B  C
D  E  F
G  H  I

Here is my ListView code:

<asp:ListView ID="ImagesListView" GroupItemCount="4" runat="server" DataSourceID="EntityDataSource1" GroupPlaceholderID="GroupsGoHere" ItemPlaceholderID="ItemsGoHere" Orientation="Horizontal">
    <LayoutTemplate>
        <div runat="server" id="Main" class="ImagePageMainLayout">
            <div id="ItemsDataPager" runat="server" class="ImagePageHeader">
                <asp:DataPager ID="ImagesDataPager" runat="server" PageSize="16" PagedControlID="ImagesListView">
                    <Fields>
                        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        <asp:NumericPagerField />
                        <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
                    </Fields>
                </asp:DataPager>
            </div>
            <div runat="server" id="GroupsGoHere">
            </div>
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <div runat="server" id="Images" class="ImagePageGroup">
            <div runat="server" id="ItemsGoHere">
            </div>
        </div>
    </GroupTemplate>
    <ItemTemplate>
        <div id="Item" align="center" runat="server" class="ImagePageItem">
        </div>
    </ItemTemplate>
    <ItemSeparatorTemplate>
        <br />
    </ItemSeparatorTemplate>
</asp:ListView>

Answer 1

This is caused by the way you use <DIV> in your templates.

The way you did it, Each group of 3 goes in a <DIV> and each item go below the other inside that div because of your <br /> in the <ItemSeparatorTemplate>.
Then the next group of 3 goes beside the last group of 3.

A solution you should try is to remove the <ItemSeparatorTemplate> and modify your <GroupTemplate> to add a <br /> after each group :

<GroupTemplate>
        <div runat="server" id="Images" class="ImagePageGroup">
            <div runat="server" id="ItemsGoHere">
            </div>
        </div>
        <br />
</GroupTemplate>

---

also note that in microsoft’s exemple, they use <table> to format the listview.

---

Update:
I tested your code and your problems is a CSS problem. I got good result by putting width:250px; in the ImagePageGroup class and width:50px; float: left; in the ImagePageItem Class but I don’t know your CSS. With those style, you dont need <br /> at all, that’s why I striped it.

You may want to test your div layout in plain HTML. Of course, the simplest solution is to switch to a table layout. Table are not evil when you use them to display Tabulated Data, but it’s another matter.