Geek Answers Handbook

How to make ASP.NET ListView list items repeat horizontally?

I have an ASP ListView displaying some items with a GroupItemCount parameter of 3:

ADG BEH CFI

i.e. he groups them vertically in columns. How to make it displayed so that it is grouped horizontally in rows in this way?

 ABC DEF GHI

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>
+4
source share
1 answer

This is due to the way you use <DIV> in your templates.

As you did, each group of 3 goes to <DIV> , and each element is below the other inside this div due to your <br /> in <ItemSeparatorTemplate> .
Then the next group of 3 goes next to the last group of 3.

The solution you should try is to remove <ItemSeparatorTemplate> and modify <GroupTemplate> to add <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 the microsoft example they use <table> to format the list.

Update:
I checked your code and your problems - CSS issue . I got a good result by placing width:250px; into the ImagePageGroup class and width:50px; float: left; width:50px; float: left; to the ImagePageItem class, but I don't know your CSS. With this style you don’t need <br /> at all , so I split it up.

You can test your div layout as plain HTML. Of course, the easiest solution is to switch to a table layout. A table is not evil when you use them to display Tabular data , but that is another matter.

+1
source

More articles:


All Articles