Solved

how to show product like 4 column each row

Posted on 2011-02-22
6
264 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:hukaka
  • 3
  • 2
6 Comments
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 500 total points
ID: 34955253
You should be able to do that with the DataList already simply by setting the RepeatDirection to "Horizontal" and the RepeatColumns to "4".
0
 

Author Comment

by:hukaka
ID: 34955375
will try that
thanks carl
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 34955591
For the page, use a repeater instead of a datalist. Use the following code:

<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>

Open in new window


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%;\">&nbsp;</td><td style=\"width:25%;\">&nbsp;</td><td style=\"width:25%;\">&nbsp;</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%;\">&nbsp;</td><td style=\"width:25%;\">&nbsp;</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%;\">&nbsp;</td></tr>";
                    ((Label)e.Item.FindControl("lblFooterCleanup")).Visible = true;
                }
            }
        }

Open in new window

0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 14

Expert Comment

by:quizwedge
ID: 34955603
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.
0
 

Author Comment

by:hukaka
ID: 34956395
thanks for your time quiz
carl's solution works
your code can be useful if I have to do something more complex  
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 34956414
NP. I learned something too. :)
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question