CODEWITHSUNDEEP
asp.netlistmultiple-columns
Mini
Mini

Reputation: 21

List displayed as 2 columns

I have a dynamic List (asp .net collection) of Data that I need to display on a aspx page. I want the data in two columns filling up from left to right depending on the number of items on the list. WHat webcontrol would be the best to use in this case?

Upvotes: 2

Views: 10636

Answers (2)

Icarus
Icarus

Reputation: 63964

You can use DataList, Repeater or GridView. It's really a matter of which features do you need to support (sorting,filtering, paging, etc.) besides your layout requirements (all of the above can do what you need).

GridView and Repeater are a bit heavier but provide easy hooks for implementing more advanced features.

UPDATE

Example:

<asp:DataList runat="server" id="dltest" 
                Border="1"
                Font-Name="Verdana" CellPadding="4"
                Font-Size="10pt"
                RepeatColumns="2" >
   <ItemTemplate>
     <table>
         <tr>
           <td>
              <%# DataBinder.Eval(Container.DataItem, "Description") %>
           </td>
           <td>
              <%# DataBinder.Eval(Container.DataItem, "Value") %>
           </td>
          </tr>
     </table>
   </ItemTemplate>
</asp:DataList>

Note: Modified to your needs but this should get you started.

Upvotes: 3

Jeff Turner
Jeff Turner

Reputation: 1347

A repeater would work in this situation and allow you alot of flexibility to style it.

CSS

.container{margin:0; width:300px;}
.item{float:left;width:150px;height:30px;}
.clear{clear:both;width:100%; height:1px;}

ASPX

<div class="container">
    <asp:Repeater ID="rptTest" runat="server">
    <ItemTemplate>
        <div class="item"><%#Eval("DataColumn") %></div>
    </ItemTemplate>
    </asp:Repeater>
    <div class="clear"></div>
</div>

Eval("DataColumn") would represent the name of the table column you wanted to display, and you can set the datasource for the repeater either in the codebehind or using one of the drag and drop datasource controls.

The CSS will make the data appear as 2 columns going left to right thanks to the "float:left". The container is 300px wide, and the items are going to be 150px each which should give it the two column appearance.

Upvotes: 2

Related Questions