Solved

how to show product like 4 column each row

Posted on 2011-02-22
6
268 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

695 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