Group columns using WebGrid in MVC (Sub-Headers)

Question

Is it possible to group columns while using WebGrid in MVC? All i could find is a example of using a sub grid but it will repeat the sub headers for every cell like this Razor Nested WebGrid:

@{
    var data = Enumerable.Range(0, 10).Select(i => new { Index = i, SubItems = new object[] { new { A = "A" + i, B = "B" + (i * i) } } }).ToArray();
    WebGrid topGrid = new WebGrid(data);
}

@topGrid.GetHtml(columns:
    topGrid.Columns(
        topGrid.Column("Index"),
        topGrid.Column("SubItems", format: (item) =>
        {
            WebGrid subGrid = subGrid = new WebGrid(item.SubItems);
            return subGrid.GetHtml(
                    columns: subGrid.Columns(
                        subGrid.Column("A"),
                        subGrid.Column("B")
                    )
                );
        })
    )
)

this will result in something like this

____________________
| index |  sub item|
|_______|__________|
|    0  |  A    B  |
|       |  1    2  |
|_______|__________|
|    1  |  A    B  |
|       |  1    2  |
|_______|__________|
|    2  |  A    B  |
|       |  1    2  |
|_______|__________|

but what i am looking for is:

____________________
| index |  sub item|
|_______|__________|
|       |  A |  B  |
|_______|____|_____|
|   0   |  1 |  2  |
|   1   |  1 |  2  |
|   2   |  1 |  2  |
|_______|____|_____|

Answer 1

I don't know how elegant is my solution but it works ....

You will need HTMLAgilityPack in your project (take it from here: http://htmlagilitypack.codeplex.com/)

Then create a web grid and store the Html string in a variable like this for example. Be sure to set displayHeader:false because we are going to create our own custom headers:

@{
        WebGrid additionalTrainingGrid = new WebGrid(source: AdditionalMasterPlanOptimizationStatistics);
         var additionalTrainingGridHTML = additionalTrainingGrid.GetHtml(displayHeader:false,
            columns: additionalTrainingGrid.Columns(
                additionalTrainingGrid.Column("MasterPlanName", "MasterPlanName", style: "P1MasterPlanName"),
                additionalTrainingGrid.Column("P1ScheduledRequests", "P1 Scheduled Requests", style: "P1ScheduledRequests"),
                additionalTrainingGrid.Column("P1UnscheduledRequests", "P1 Unscheduled Requests", style: "P1UnscheduledRequests"),

                additionalTrainingGrid.Column("P2ScheduledRequests", "P2 Scheduled Requests", style: "P2ScheduledRequests"),
                additionalTrainingGrid.Column("P2UnscheduledRequests", "P2 Unscheduled Requests", style: "P2UnscheduledRequests"),

                additionalTrainingGrid.Column("P3ScheduledRequests", "P3 Scheduled Requests", style: "P3ScheduledRequests"),
                additionalTrainingGrid.Column("P3UnscheduledRequests", "P3 Unscheduled Requests", style: "P3UnscheduledRequests")
            )
        );
    }

Create the required headers using plain HTML and use the HtmlAgilityPack to extract all the elements from the WebGrid:

<table>
    <thead>
        <tr>
            <th colspan="1" rowspan="2" class="MasterPlanName">Master Plan Name</th>
            <th colspan="2">Plan 1</th>
            <th colspan="2">Plan 2</th>
            <th colspan="2">Plan 3</th>
        </tr>
        <tr class="sub-header">
            <th class="ScheduledRequests plan1">Scheduled Requests</th>
            <th class="UnscheduledRequests plan1">Unscheduled Requests</th>

            <th class="ScheduledRequests plan2">Scheduled Requests</th>
            <th class="UnscheduledRequests plan2">Unscheduled Requests</th>

            <th class="ScheduledRequests plan3">Scheduled Requests</th>
            <th class="UnscheduledRequests plan3">Unscheduled Requests</th>
        </tr>
    </thead>
    <tbody>
        @{ 
            HtmlDocument additionalTrainingGridDOC = new HtmlDocument();
            additionalTrainingGridDOC.LoadHtml(additionalTrainingGridHTML.ToString());

            var AdditioanlTrs = additionalTrainingGridDOC.DocumentNode.SelectNodes("//tr");
            if (AdditioanlTrs != null)
            {   
                foreach (var item in AdditioanlTrs)
                {
                @Html.Raw(item.OuterHtml);
                }
            }
        }

    </tbody>
</table>​