Banzboy
Banzboy

Reputation: 113

Creating a table column by column with repeater

I'm trying to make a comparison table for a website. There is a repeater which has a list of objects as the datasource.

The table will need to look like so:

Product1        Product2        Product3
ProductName1    ProductName2    ProductName3
ProductImage1   ProductImage2   ProductImage3

The problem is that I have the <tr> and <td> tags in the repeater and this causes the ProductNames to not be in the same row, so I get this:

Product1       
ProductName1    
ProductImage1   

Product2       
ProductName2    
ProductImage2   

Product3       
ProductName3    
ProductImage3

Is there a way to fill in the table column by column with the different items being in the same row?

Edit (added code):

<asp:PlaceHolder runat="server" ID="phPopUp">
    <div id="popup-wrapper">
        <asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
            <HeaderTemplate>
                <table class="table-wrapper">
            </HeaderTemplate>
            <ItemTemplate>
                    <tr>
                        <td>
                            <%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).PageTitle %>
                        </td>
                    </tr>
                    <tr>
                        <td class="product-image">
                            <img src='<%# URLHelper.GetAbsoluteUrl(((PPG.Ecommerce.CategoryProduct)Container.DataItem).ProductImage) %>'
                                alt='<%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).PageTitle %>'
                                title='<%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).PageTitle %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%# ResHelper.GetString("PPGEcomUk.ProductCompare.Features") %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%-- Features --%>
                            <asp:Literal runat="server" ID="ltFeatures" />
                        </td>
                    </tr>
                    <%--                    <tr>
                        <td>
                            <asp:Literal ID="ltApplication" runat="server" />
                        </td>
                    </tr>--%>
                    <tr>
                        <td>
                            <%# ResHelper.GetString("PPGEcomUk.ProductCompare.ColorType") %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).EcomProduct.ProductColorType %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%# ResHelper.GetString("PPGEcomUk.ProductCompare.Colors") %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Literal ID="colors" runat="server" />
                            <asp:BulletedList runat="server" ID="blColors" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%# ResHelper.GetString("PPGEcomUk.ProductCompare.Colors") %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Literal runat="server" ID="ltVolumes" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%-- substrate --%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%-- finish --%>
                        </td>
                    </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

Upvotes: 0

Views: 191

Answers (1)

JulioCT
JulioCT

Reputation: 1117

repeat the repeater in each row:

<asp:PlaceHolder runat="server" ID="phPopUp">
    <div id="popup-wrapper">
        <table class="table-wrapper">
            <tr>
                <asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                    <ItemTemplate>
                        <td>
                            <%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).PageTitle %>
                        </td>

                    </ItemTemplate>
                </asp:Repeater>
            </tr>
            <tr>
                <asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                    <ItemTemplate>
                        <td class="product-image">
                            <img src='<%# URLHelper.GetAbsoluteUrl(((PPG.Ecommerce.CategoryProduct)Container.DataItem).ProductImage) %>'
                                 alt='<%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).PageTitle %>'
                                 title='<%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).PageTitle %>' />
                        </td>

                    </ItemTemplate>
                </asp:Repeater>
            </tr>
            <tr>
                <asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                    <ItemTemplate>
                        <td>
                            <%# ResHelper.GetString("PPGEcomUk.ProductCompare.Features") %>
                        </td>

                    </ItemTemplate>
                </asp:Repeater>
            </tr>
            <tr>
                <asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                    <ItemTemplate>
                        <td>
                            <%-- Features --%>
                            <asp:Literal runat="server" ID="ltFeatures" />
                        </td>

                    </ItemTemplate>
                </asp:Repeater>
            </tr>
            <%--                    <tr>
            <td>
                <asp:Literal ID="ltApplication" runat="server" />
            </td>
        </tr>--%>
            <tr>
                <asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                    <ItemTemplate>
                        <td>
                            <%# ResHelper.GetString("PPGEcomUk.ProductCompare.ColorType") %>
                        </td>

                    </ItemTemplate>
                </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <%# ((PPG.Ecommerce.CategoryProduct)Container.DataItem).EcomProduct.ProductColorType %>
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <%# ResHelper.GetString("PPGEcomUk.ProductCompare.Colors") %>
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <asp:Literal ID="colors" runat="server" />
                        <asp:BulletedList runat="server" ID="blColors" />
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <%# ResHelper.GetString("PPGEcomUk.ProductCompare.Colors") %>
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <asp:Literal runat="server" ID="ltVolumes" />
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <%-- substrate --%>
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
            <tr><asp:Repeater runat="server" ID="rptProductInfo" OnItemDataBound="rptProductInfo_ItemDataBound">
                <ItemTemplate>
                    <td>
                        <%-- finish --%>
                    </td>

                </ItemTemplate>
            </asp:Repeater>
            </tr>
        </table>

Upvotes: 1

Related Questions