Hello,

On a view I am displaying a list of products using a loop for and a table.

The problem is that I don't want to display one product per row, I want to display 4 products per row each in its column.

So it's like:

Row 1 >

   > Column 1 to 4 (Products 1 to 4)

Row 2 >

  > Column 1 to 4 (Products 5 to 8)

How can I do this?

Thanks,

Miguel

shapper, you could give more information.  My guess you may be using a field set and the standard .css that comes with the default ASP.NET MVC template.  You may have to tweak the .css to not force a new paragraph.

You can determine how many products you have to display.

You can write four HTML helpers:  4 product helper; 3 product helper; 2 product helper; 1 product helper

Then from modulus 4 on product count, if

            0:  loop using the 4 product helper only.
            1:  loop using the 4 product helper, use the 1 product helper for the last product
            2:  loop using the 4 product helper, use the 2 product helper for the last 2 products
            3:  loop using the 4 product helper, use the 3 product helper for the last 3 products

The above idea works although it is not elegant.

TIMTOWTDI =. there is more than one way to do it

Regars,
Gerry (Lowry)

The cleanest solution is to just output a single list (ul, li) and tweak the css so that the products will displayed next to each other and automatically go to a new row when there is no room for the next item.

html:

<ul id="productlist">
    <li>product 1</li>
    <li>product 2</li>
    ...
    <li>product 8</li>
</ul>

css:

#productlist
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 800px;
}

#productlist li
{
    float: left;
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
}

@ Tijn ~~ you seem to be saying in a different way more or less what I described.

Note, however, that your solution works perfectly only when the number of products is evenly divisible by four.

With a row of four, the first <li> gets product n, the second <li> gets product n+1, the third <li> gets product n+2, and the fourth <li> gets product n+3.  A 4 product helper would simplify the HTML.  It is likely possible to write a html helper that handles a variable number of products; that would be better than having separate helpers for 4 products, 3 products, 2 products, and 1 product.

Also, I'm not a css expert ... is there a reason you did not use a css class "productlist" instead of your id "productlist"?

Regards,
Gerry (Lowry)

Your solution is what I have been trying but I have been having a few problems.

I think you need to clear the productlist to ...

shapper:

Your solution is what I have been trying but I have been having a few problems.

I think you need to clear the productlist to ...

???????????????????

Hello shapper .... please finish your thought ...... please give more detailed information because I am uncertain as to your exact question.

There are a number of deeper considerations, for example, at four products per line, will all of your products fit on a web page that is not horrendously long ... if this is not the case, you will also want to display your products in so many per page, for example, 25 lines x 4 = 100 products per page.

Regards,
Gerry (Lowry)

Hi,

Basically I am trying to create an image gallery where each image has a description and a link under it.

Each image, with its description and link, is a product in my Model.Products.

I tried to include each product into a list item of an orderede list and using pure CSS to style it.

The problem is that the floats and margins don't allow to obtain what I need ... It's not easy on cross browser.

So I am thinking in creating a helper that creates a table on the fly.

So I would return 24 products to my view.

Then on my helper I would make rows = Model.Procucts.Count() / 4 and I would get 6 rows.

Then with a loop I would generate each row with its columns for each product.

On a multiple of 4 I will increase the row number and create a new row.

I have paging so the last page might have only, for example, 23 records.

So on my html helper I would have rows = Round Up (Model.Procucts.Count() / 4)

And then I would have a last column empty ...

This would not be a problem with list but with tables I can't have a row with less columns than another ...

... well I can but in this case would get a wider column which is not the objective.

What do you think?

I am just starting to create the helper.

I described this earlier in this thread.  It may not be elegant, but it works.  Think about four helpers.

Helper A:  4 products (table columns) per row.

If your number of products is evenly divisable by 4, you only need to think about using Helper A:

Helpers B, C, and D:  still 4 columns BUT for the unused column(s), you have only &nbsp; as that column's content.

First loop:  uses Helper A if 4 or more columns.

Next piece of code completes the 3, 2, or single remaining column(s).

In your Controller, you could do something like ViewData["extraProducts"] = "2"; and the test extraProducts in your View in order to select the correct Helper B, C, or D for the extra 3, 2, or 1 product(s).

You could pass the upper limit for the loop in the same way.

As I said, not elegant, but should work.  TIMTOWTDI =. there is more than one way to do it.

Regards.
Gerry (Lowry)

Hi Gerry,

I got a little bit lost about your approach using four helpers ... However I came up with the following:

    // Gallery
    public static String Gallery(this HtmlHelper helper, IList<Product> products, Int32 columns, String name, IDictionary<String, Object> attributes) {

      // Define table
      TagBuilder table = new TagBuilder("table");
      if (!String.IsNullOrEmpty(name)) table.Attributes.Add("id", name);
      table.MergeAttributes<String, Object>(attributes);     

      // Define rows
      Int32 rows = (Int32)Math.Ceiling(products.Count() / (Double)(columns == 0 ? 1 : columns));

      // Define body
      StringBuilder body = new StringBuilder("<tbody");

      // Create table
      for (Int32 i = 0; i < rows; i++) {
        StringBuilder row = new StringBuilder("<tr>");
        for (Int32 j = 0; j < columns; j++) {
          StringBuilder column = new StringBuilder("<td>");
          Int32 index = i * columns + j;
          if (index >= products.Count) {
            column.Append(" ");
          } else {
            Product p = products[index];
            column.Append(p.Name);
          }
          column.Append("</td>");
          row.Append(column);
        }
        row.Append("</tr>");
        body.Append(row);
      }

      // Return table
      table.InnerHtml = body.ToString();
      return table.ToString();

    } // Gallery

It seems to be working. I didn't find any problem in it.

But any suggestion to improve my code or approach is welcome.

Thanks,

Miguel