Access Model Data in WebGrid

Question

How do I access additional sub-model information within a WebGrid?

var personGrid = new WebGrid(source: Model.People,
        ajaxUpdateContainerId: "personGrid",
        ajaxUpdateCallback: "jQueryTableStyling",
        defaultSort: "PersonID");

@personGrid.GetHtml(
        tableStyle: "webgrid",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "zebra",
              columns: personGrid.Columns(
                   personGrid.Column("PersonID", "Person ID"),
                   personGrid.Column("Name", "Name"),
                   // This line isn't working and I'm not sure how to get it to work.
                   personGrid.Column(model => model.Career.Title) 
               )
        )

Answer 1

@model List

WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 10, ajaxUpdateContainerId: "divDataList");

<div id="divDataList">
    @grid.GetHtml(tableStyle: "table-user-information table table-bordered table-striped",
        headerStyle: "webgrid-header",
        fillEmptyRows: false,
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: "< Prev",
        nextText: "Next >",
        lastText: "Last >>",
        columns: grid.Columns(
        grid.Column(header: "S No.", style: "white", format: item => item.WebGrid.Rows.IndexOf(item) + 1 + Math.Round(Convert.ToDouble(grid.TotalRowCount / grid.PageCount) / grid.RowsPerPage) * grid.RowsPerPage * grid.PageIndex),

grid.Column(columnName: "registrationNo", header: "Application No.", format: @@item.registrationNo), grid.Column("progressReportSubject", header: "Progress Report Subject"), grid.Column("uploadDate", header: "Upload Date"), grid.Column(columnName: "progressReportPath", header: "Progress Report", format: @ @if (!string.IsNullOrEmpty(@item.progressReportPath)) { } else {

    }
    </text>)

        ))
</div>

}

Answer 2

Try:

personGrid.Column(format: @<text>@item.Career.Title</text>)