Reputation: 113
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
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