?
Solved

how to show product like 4 column each row

Posted on 2011-02-22
6
Medium Priority
?
269 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
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…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses

752 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