How to change MVC Web Grid structure?

Question

I am trying to show list of items in a MVC 4 Web Grid control. But I am unable to re-format my web grid as table structure below.

Web Grid structure like this.

Table structure like this.

Here is my razor code for web grid.

@{
        var grid = new WebGrid(Model.EnrollPlanPriceLevelList, canPage: true, rowsPerPage: 10, selectionFieldName: "id", ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);
        if (grid.HasSelection)
        {
            var EnrollPlanPriceLevelID = grid.Rows[grid.SelectedIndex].Value;
        }
     }
    @grid.GetHtml(
    tableStyle: "table table-condensed table-striped table-hover no-margin",
    headerStyle: "",
    mode: WebGridPagerModes.All,
    columns:
    grid.Columns(
    grid.Column("", format: (item) => item.GetSelectLink(item.EnrollPlanPriceLevelID.ToString())),
    grid.Column("SchoolYears.Name", "School Year"),
    grid.Column("EnrollPlans.PlanName", "Enroll Plan"),
    grid.Column("PriceLevels.Name", "Price Level"),
    grid.Column("Price", "Price"),
    grid.Column("", format: @<text>@Html.Label("Edit", new { @id = item.EnrollPlanPriceLevelID, @class = "badge", @onclick = "bindplanprogram(" + item.EnrollPlanPriceLevelID + ")" }) </text>),
    grid.Column("", format: @<text>@Html.ActionLink("Delete", "Delete", new { id = item.EnrollPlanPriceLevelID }, new { @class = "badge" }) </text>)
            ))

Here is the table structure

<table class="table table-condensed table-striped table-hover no-margin">
        <thead>
            <tr>
                <th>School Year
                </th>
                <th>Enroll Plan</th>
                <th>
                    <span class="span3">Early Bird</span>
                    <span class="span3">Value Pricing</span>
                    <span class="span4">Standard Pricing</span>
                </th>
                <th>

                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2011-2012</td>
                <td>A(k-8) Grade</td>
                <td>
                    <span class="span3">$ 50</span>
                    <span class="span3">$ 60</span>
                    <span class="span3">$ 70</span>
                </td>
                <td>
                    <a class="badge">Edit</a>
                    <a class="badge">Delete</a>
                </td>
            </tr>
            <tr>
                <td>2011-2012</td>
                <td>B (9-12)Grade</td>
                <td>
                    <span class="span3">$ 70</span>
                    <span class="span3">$ 80</span>
                    <span class="span3">$ 90</span>
                </td>
                <td>
                    <a class="badge">Edit</a>
                    <a class="badge">Delete</a>
                </td>
            </tr>
            <tr>
                <td>2011-2012</td>
                <td>Adult Ed. (age 18+)</td>
                <td>
                    <span class="span3">$ 1500</span>
                    <span class="span3">$ 175</span>
                    <span class="span3">$ 200</span>
                </td>
                <td>
                    <a class="badge">Edit</a>
                    <a class="badge">Delete</a>
                </td>
            </tr>

        </tbody>
    </table>

I want to reformate my web grid structure as above table structure. Please tell me someone! How to change web grid structure accordingly?

Answer 1

The only way to achieve what you want with the WebGrid is to change the shape of the data you are passing in. Whether you do that in your SQL or whether you do that using LINQ to create a collection of anonymous types that have the appropriate properties is up to you, but the end result must be a collection of items that have public properties that match what you want as column names.