How to use rowspan in MVC-Razor, without javascript?

Question

How can I merge cells in a table using rowspan inside a Razor view?

Without using javascript/jQuery.
The table's source is an IEnumerable.
Some of the items in the source will have the same value in a certain field and those are the one we want to merge in one cell.
We don't know how many times a given value is repeated.

The resulting HTML should be something like this:

<table>
    <tr>
        <td rowspan="2">Column 1 row 1</td>
        <td>Column 2 row 1</td>
    </tr>
    <tr>
        <td>Column 2 row 2</td>
    </tr>
    <tr>
        <td rowspan="3">Column 1 row 3</td>
        <td>Column 2 row 3</td>
    </tr>
    <tr>
        <td>Column 2 row 4</td>
    </tr>
    <tr>
        <td>Column 2 row 5</td>
    </tr>
</table>

EDIT to add the data source and desired result:

The data source may be something like Products with Categories. Ex:

Products

Laptop (Electronics)
iPod (Electronics)
TV (Electronics)
Coffee (Groceries)
Cookies (Groceries)

The result

╔═════════════╦════════╗
║ Electronics ║ Laptop ║
║             ║ iPod   ║
║             ║ TV     ║
╠═════════════╬════════╣
║ Groceries   ║ Coffee ║
║             ║ Cookies║ 
╚═════════════╩════════╝

The only way I have in mind is using Linq to count how many times a value is on the list, but I wanted to know if someone have a better solution. Thanks!

Sounds like an interesting challenge. Are you always merging on the same field? Maybe .GroupBy() ? — jkoreska
– jkoreska, Commented Nov 5, 2011 at 0:22
@jkoreska: Yes, always the same field. I don't think a group by would help. I'll edit the question to add the data source. — Marques
– Marques, Commented Nov 7, 2011 at 16:42
GroupBy and a Select should make it, the problem I see is at the time of doing the dynamic rowspan. Did you solve it? — Tasio
– Tasio, Commented Mar 9, 2012 at 10:02
I miss understood the first comment, I think a group by will do. At the end I did something different: a new row with the category name every time the value changes. The row also has a check box to allow the user to select all rows in the category. I think is better that way. — Marques
– Marques, Commented Mar 24, 2012 at 2:37

Artiom · Accepted Answer · 2014-03-21 09:26:11Z

Try something like this.

<table>
    <tr>
        <th>Movie</th>
        <th>Person</th>
    </tr>

    @foreach (var byMovies in elements.GroupBy(x => x.Movie)
                                      .OrderBy(movie => movie.Key.Name))
    {
        var secondRowOrHigher = false;
        @:<tr>
        @:<td rowspan="@byMovies.Count()">@byMovies.Key.Name</td>

        foreach (var ticket in byMovies.OrderBy(x => x.Person.Name))
        {
            if (secondRowOrHigher)
            {
                @:<tr>
            }
            secondRowOrHigher = true;

            <td>@ticket.Person.Name</td>
            @:</tr>
        }
    }
</table>

and classes just to have a picture

public class TicketInfo
{
    public Movie Movie { get; set; }
    public Person Person { get; set; }
}

public class Person
{
    public string Name { get; set; }
}

public class Movie
{
    public string Name { get; set; }
}

Collectives™ on Stack Overflow

How to use rowspan in MVC-Razor, without javascript?

Categories

Products

The result

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Categories

Products

The result

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related