two row header in mvc3 WebGrid

Question

Is there any way to have a two row header in a WebGrid ?

I looked for a way to do custom rendering for the header or for a way to only render the body of the table (without the table tags), but I couldn't find anything.

I would like to create a webgrid that looks something like this:

-------------------------------------------
|grouped cols                |grouped cols|
-------------------------------------------
|col1 |  col2 | col3 | col4  | col5 |col6 |
-------------------------------------------
-------------------------------------------
|d1   |  d2   | d3   | d4    | d5   |d6   |
-------------------------------------------
|d1   |  d2   | d3   | d4    | d5   |d6   |
-------------------------------------------
|d1   |  d2   | d3   | d4    | d5   |d6   |
-------------------------------------------

Keep in mind that I am new to mvc3 (so I might miss the obvious solution).

Answer 1

Server side solution:

@(new HtmlString(grid.GetHtml(Your grid definition).ToHtmlString()
    .Replace("<thead>",""<thead><tr class='webgrid-header'><th scope='col' colspan='4'>cols 1 to 4</th><th scope='col' colspan='2'>cols 5 and 6</th></tr>")))

Client side (Assuming only one webgrid in the view you could use some jquery):

@Scripts.Render("~/bundles/jquery")
<script>
    $(function () {
        var th = $("<tr class='webgrid-header'><th scope='col' colspan='4'>col 1 to 4</th><th scope='col' colspan='2'>col 5 and 6</th></tr>")
        $("thead").prepend(th);
    });
</script>

Answer 2

You can build it with html element. You should use colspan and rowspan to group cells. Take a look at this link;