hukaka
asked on
how to show product like 4 column each row
Hi experts
I used to show product in rows with datalist
like
img 1 / product1e / detailed information /price
img 2 / product1e / detailed information /price
img 3 / product1e / detailed information /price
...
...
img 87 / product1e / detailed information /price
each row for one product
I wonder if I can show 4 product in one row
shows like this
img1 | img2 | img3 | img4
row1 name | name2| name3| name4
price | price2 | price3| price4
--------------------------
img5 | img6 | img7 | img8
row2 name5 | name6| name7| name8
price5 | price6 | price7| price8
data are read from database
dont know how many products in total
is there a solution for that?
thx
I used to show product in rows with datalist
like
img 1 / product1e / detailed information /price
img 2 / product1e / detailed information /price
img 3 / product1e / detailed information /price
...
...
img 87 / product1e / detailed information /price
each row for one product
I wonder if I can show 4 product in one row
shows like this
img1 | img2 | img3 | img4
row1 name | name2| name3| name4
price | price2 | price3| price4
--------------------------
img5 | img6 | img7 | img8
row2 name5 | name6| name7| name8
price5 | price6 | price7| price8
data are read from database
dont know how many products in total
is there a solution for that?
thx
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
For the page, use a repeater instead of a datalist. Use the following code:
You'll want this in the code behind:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<asp:Repeater ID="rptTest" runat="server" OnItemDataBound="rptTest_ItemDataBound">
<ItemTemplate>
<asp:Label ID="lblHeader" runat="server" Text="<tr>" Visible="false" />
<td style="width:25%;">
Image<br />
Name<br />
Price<br />
<br />
</td>
<asp:Label ID="lblFooter" runat="Server" Text="</tr>" Visible="false" />
</ItemTemplate>
<AlternatingItemTemplate>
<asp:Label ID="lblHeader" runat="server" Text="<tr>" Visible="false" />
<td style="width:25%;">
Image<br />
Name<br />
Price<br />
<br />
</td>
<asp:Label ID="lblFooter" runat="Server" Text="</tr>" Visible="false" />
</AlternatingItemTemplate>
<FooterTemplate>
<asp:Label ID="lblFooterCleanup" runat="server" Text="" Visible="false" />
</FooterTemplate>
</asp:Repeater>
</table>You'll want this in the code behind:
protected void rptTest_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if (e.Item.ItemIndex % 4 == 0)
{
((Label)e.Item.FindControl("lblHeader")).Visible = true;
}
else if (e.Item.ItemIndex % 4 == 3)
{
((Label)e.Item.FindControl("lblFooter")).Visible = true;
}
}
else if (e.Item.ItemType == ListItemType.Footer)
{
if (rptTest.Items.Count % 4 == 0)
{
((Label)e.Item.FindControl("lblFooterCleanup")).Text = "<td style=\"width:25%;\"> </td><td style=\"width:25%;\"> </td><td style=\"width:25%;\"> </td></tr>";
((Label)e.Item.FindControl("lblFooterCleanup")).Visible = true;
}
else if (rptTest.Items.Count % 4 == 1)
{
((Label)e.Item.FindControl("lblFooterCleanup")).Text = "<td style=\"width:25%;\"> </td><td style=\"width:25%;\"> </td></tr>";
((Label)e.Item.FindControl("lblFooterCleanup")).Visible = true;
}
elseif (rptTest.Items.Count % 4 == 2)
{
((Label)e.Item.FindControl("lblFooterCleanup")).Text = "<td style=\"width:25%;\"> </td></tr>";
((Label)e.Item.FindControl("lblFooterCleanup")).Visible = true;
}
}
}
Though if @carl_tawn's solution works, that would be more elegant. I started working on my solution before he posted his, so figured I'd post mine anyway.
ASKER
thanks for your time quiz
carl's solution works
your code can be useful if I have to do something more complex
carl's solution works
your code can be useful if I have to do something more complex
NP. I learned something too. :)
ASKER
thanks carl