ASP.NET: Table with Repeater control and alternating data in same for

Question

I have an assignment to move one of our pages from a single table with three columns, into two table which display the same data set but squeezed together and alternated. So if my data set today is displayed as

The new data set would look like

So far, I can get the table data to alternate, but I can't then start a new row.

<asp:Repeater ID="fruitRep" runat="server" EnableViewState="false">
            <HeaderTemplate>
            <table>
                <thead>
                <tr align="center">
                    <th>Line</th>
                    <th>Fruit</th>
                    <th>Cost</th>    
                    <th class ="ghostColumn">Blank</th>    
                    <th>Line</th>
                    <th>Fruit</th>
                    <th>Cost</th>
                </tr>
                </thead>
            </HeaderTemplate>

        <ItemTemplate>
                <td><%= LineCounter %></td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, Fruit")%>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, PerUnitCost")%> 
                </td>
                <td class ="ghostColumn">...</td>
        </ItemTemplate>
        <AlternatingItemTemplate>
                <td><%= LineCounter %></td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, Fruit")%>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, PerUnitCost")%> 
                </td>
        </AlternatingItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

Answer 1

If you want to have the headers and the items in the same table, you can do this. Use Container.ItemIndex %2 == 0 to write the start or end of a row.

<table border="1">
    <tr>
        <th>Line</th>
        <th>Fruit</th>
        <th>Cost</th>
        <th>&nbsp;</th>
        <th>Line</th>
        <th>Fruit</th>
        <th>Cost</th>
    </tr>

    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>

            <%# Container.ItemIndex %2 == 0 ? "<tr>" : "" %>

            <td><%# Container.ItemIndex + 1 %></td>
            <td><%# Eval("Ride_id") %></td>
            <td><%# Eval("naam") %></td>

            <%# Container.ItemIndex %2 == 0 ? "<td></td>" : "</tr>" %>

        </ItemTemplate>
    </asp:Repeater>

</table>

Answer 2

While it will still need some styling, your code could be as simple as that:

<!-- you'll have to create the column headers outside the DataList -->
<table>
    <tr>
        <td>Line</td><td>Fruit</td><td>Cost</td>
        <td>&nbsp;</td>
        <td>Line</td><td>Fruit</td><td>Cost</td>
    </tr>
</table>

<asp:DataList ID="fruitRep" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table" runat="server">
    <ItemTemplate>
        <%# Container.ItemIndex + 1 %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "Fruit") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "PerUnitCost") %>
    </ItemTemplate>
    <SeparatorTemplate>&nbsp;</SeparatorTemplate>
</asp:DataList>

Note that I fudged in the table cells into the enclosing ItemTemplate which itself creates a starting and closing table cell.