Solved

how to show product like 4 column each row

Posted on 2011-02-22
6
266 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

735 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