can repeater do "this"

iceman90289 · March 23rd, 2009, 03:44 PM

i'd like to make my repeater spit things out in a grid type fashion. is this possible? or can the repeater only make a long list of stuff? currently i use it to display items in a store that can be purchased.

dparsons · March 23rd, 2009, 11:21 PM

Repeaters are a good choice when you need to display data in, essentially, a table with 1 column and n number of rows. That is not to say you couldn't have a table style layout within each row, however.

When you say "grid type fashion" my mind automatically goes to the GridView. Is there any reason you are not using this control? What is it that you are ultimately trying to accomplish?

-Doug

iceman90289 · March 24th, 2009, 01:17 AM

something similar to how they are showing the products in a grid (this makes me think about looking at grid view because it has the word grid in it. haha) like at allfashiongo.com

when you look at say... shirts they have products in a grid. i was hoping the repeater could do that. but im starting to think it wasnt the best choice.

philip_cole · March 24th, 2009, 05:39 AM

You can do this as a repeater in a very similar to the allfashiongo site and is probably a good solution in this case.
They just have a containing div with a fixed width, then have each individual item as a fixed width div with a "float:left;" style. As long as you fix the width and make sure nothing, like long text, makes it grow, it will lay out like a grid as their one does.
Other controls like gridviews are not really practical for this as each item takes up one full row and you want 3 or 4 in each row.

Phil

dparsons · March 24th, 2009, 11:56 AM

Based on the current design of that site, I would not use a repeater. First off there is no consistent design between sections. For example, take a look at Pants/Jeans. Notice that each item is displayed in its own row and the items expand far down the page. Now, flip over to Plus Sizes and see how there are n number of products per row?

I think that if you are going to take the repeater approach (and thus the Pants/Jeans interface style) you need to be able to utilize all of the negative space that is going to be created. Personally I prefer the Plus Size approach which can be done by using a DataList.

My two cents anyway.

hth.
-Doug

iceman90289 · March 24th, 2009, 03:11 PM

thanks guys.

as far as the sites inconsistent design... it was made by multiple people because this idiot tried to "play buisiness-man" and threw a team of random people together and created a demo-site so that he could present it to a client and say "this is what we will make for you" and his client thought "wow this site sucks. lets make it look like it was made by one person. with a consistent design and some kind of theme."

thats kind of where i might come in. (if they decide to go with me) im redoing this with asp.net. and im going to make the products list out in a grid.

philip_cole · March 24th, 2009, 03:45 PM

Quote:

Originally Posted by dparsons

For example, take a look at Pants/Jeans. Notice that each item is displayed in its own row and the items expand far down the page. ...
I think that if you are going to take the repeater approach (and thus the Pants/Jeans interface style)

Doug,
Please correct me if I'm misunderstanding your last post, but why do repeaters necessarily have to have items on separate "rows"?

Code:

<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
    string[] arrProducts = new string[] {
        "W8-32475-GRAY Skirt", "4953 Navy Vintage Shorts", "4953 Brown Vintage Shorts",
        "4953 White Vintage Shorts", "4952A Stone Vintage Shorts", "4952A Black Vintage Shorts",
        "4952A Olive Vintage Shorts", "61085HL Aqua Denim Bermuda", "61085HL Cherry Denim Bermuda",
        "61085HL Blue Denim Bermuda", "61085HL DK Orange Bermuda", "61085HL Green Denim Bermuda",
        "61085HL HotPink Denim Bermuda", "61085HL Orange -Denim Bermuda", "61085HL Pink Denim Bermuda"
    };

    Products.DataSource = arrProducts;
    Products.DataBind();
}
</script>
<html>
<head></head>
<body>
    <form id="form1" runat="server">
    <asp:Repeater runat="server" ID="Products">
    <ItemTemplate>
        <div style="float:left; width:200px; margin:15px;">
          <div><img src="http://www.allfashiongo.com/4952AoliveT.jpg" /></div>
          <div><%# Container.DataItem %></div>
        </div>
    </ItemTemplate>
    </asp:Repeater>
    </form>
</body>
</html>

Phil

dparsons · March 24th, 2009, 04:01 PM

Phil, nice use of CSS.

I am talking about the default behavior of a repeater, of course, where it will simply "stack" each individual item "on top" of each other. Where as a datalist can be configured to do what you have done with CSS through setting a few properties.

To be honest I would not have come up with that CSS since I am not a UI guy at all (unless of course you want black text on a white background then im your guy!) though it does further prove the statement that there is more than one way to achieve the same end through programming. Good example.

-Doug

Imar · March 24th, 2009, 05:17 PM

Or, since you're using ASP.NET 3.5, use the new ListView control.

It has the main features of all data driven controls (repeat the data, Item and AlternatingItem templates, paging, inserting and so on), while you still maintain full control over the markup so you can create a fluid layout as Phil is suggesting....

Code:

 
<%@ Page Language="C#" %>
<script runat="server">
  void Page_Load(object sender, EventArgs e)
  {
    string[] arrProducts = new string[] {
        "W8-32475-GRAY Skirt", "4953 Navy Vintage Shorts", "4953 Brown Vintage Shorts",
        "4953 White Vintage Shorts", "4952A Stone Vintage Shorts", "4952A Black Vintage Shorts",
        "4952A Olive Vintage Shorts", "61085HL Aqua Denim Bermuda", "61085HL Cherry Denim Bermuda",
        "61085HL Blue Denim Bermuda", "61085HL DK Orange Bermuda", "61085HL Green Denim Bermuda",
        "61085HL HotPink Denim Bermuda", "61085HL Orange -Denim Bermuda", "61085HL Pink Denim Bermuda"
    };
    Products.DataSource = arrProducts;
    Products.DataBind();
  }
</script>
<html>
<head>
  <title></title>
  <style type="text/css">
    .Even
    {
      color: Red;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ListView runat="server" ID="Products">
      <LayoutTemplate>
        <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
      </LayoutTemplate>
      <AlternatingItemTemplate>
        <div style="float: left; width: 200px; margin: 15px;" class="Even">
          <div>
            <img src="http://www.allfashiongo.com/4952AoliveT.jpg" alt="Short" /></div>
          <div>
            <%# Container.DataItem %></div>
        </div>
      </AlternatingItemTemplate>
      <ItemTemplate>
        <div style="float: left; width: 200px; margin: 15px;">
          <div>
            <img src="http://www.allfashiongo.com/4952AoliveT.jpg" alt="Short" /></div>
          <div>
            <%# Container.DataItem %></div>
        </div>
      </ItemTemplate>
    </asp:ListView>
  </form>
</body>
</html>

Of course you may be better off using jQuery for these kind of presentational issues, but that's a different discussion....;-)

Cheers,

Imar

dparsons · March 24th, 2009, 06:01 PM

Quote:

Originally Posted by Imar

Of course you may be better off using jQuery for these kind of presentational issues, but that's a different discussion....;-)

OR ExtJS. mmmmm. ;]