Preview
Name Surname Marital status Age Birthday Employed
Joe Crosswave Married 32 1/5/1992 False
Child name Age Birthday
Katy 5 1/5/2019
Kate 5 1/5/2019
Merry Lisel Widowed 42 5/6/1982
Henry Crux Single 30 11/19/1994 True
Showing 1-3 out of 11
View

@model IQueryable<Person>

@(Html
    .Grid("_NestedPersonGrid", Model)
    .Build(columns =>
    {
        columns.Add(model => model.Name).Titled("Name");
        columns.Add(model => model.Surname).Titled("Surname");
        columns.Add(model => model.MaritalStatus).Titled("Marital status");

        columns.Add(model => model.Age).Titled("Age");
        columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
        columns.Add(model => model.IsWorking).Titled("Employed");
    })
    .Pageable(pager =>
    {
        pager.PartialViewName = "_ExtendedPager";
        pager.RowsPerPage = 3;
    })
)

_NestedPersonGrid partial view

@model IGrid<Person>

<div class="mvc-grid">
    <div class="mvc-grid-table">
        <table>
            <thead>
                <tr class="mvc-grid-headers">
                    @foreach (IGridColumn column in Model.Columns)
                    {
                        <th@(column.AsAttributes())>
                            <span class="mvc-grid-title">@column.Title</span>
                        </th>
                    }
                </tr>
            </thead>
            <tbody>
                @if (Model.Rows.Any())
                {
                    foreach (IGridRow<Person> row in Model.Rows)
                    {
                        <tr class="@row.CssClasses">
                            @foreach (IGridColumn column in Model.Columns)
                            {
                                <td class="@column.CssClasses">@column.ValueFor(row)</td>
                            }
                        </tr>

                        if (row.Model.Children.Any())
                        {
                            <tr>
                                <td colspan="@Model.Columns.Count()">
                                    @(Html
                                        .Grid("_NestedPersonGrid", row.Model.Children)
                                        .Build(columns =>
                                        {
                                            columns.Add(model => model.Name).Titled("Child name");
                                            columns.Add(model => model.Age).Titled("Age");
                                            columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
                                        })
                                    )
                                </td>
                            </tr>
                        }
                    }
                }
                else
                {
                    <tr class="mvc-grid-empty-row">
                        <td colspan="@Model.Columns.Count()">
                            @Model.EmptyText
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

_ExtendedPager partial view

@using NonFactors.Mvc.Grid;
@model IGridPager
@{
    Int32 totalPages = Model.TotalPages;
    Int32 currentPage = Model.CurrentPage;
    Int32 firstDisplayPage = Model.FirstDisplayPage;
}

<div class="mvc-grid-pager mvc-grid-extended-pager @Model.CssClasses" data-show-page-sizes="@Model.ShowPageSizes">
    @if (totalPages > 0)
    {
        <div class="mvc-grid-pager-extension">Showing @((currentPage - 1) * Model.RowsPerPage + 1)-@(Math.Min(currentPage * Model.RowsPerPage, Model.TotalRows)) out of @Model.TotalRows</div>

        <div>
            @if (currentPage > 1)
            {
                <button type="button" data-page="1">«</button>
                <button type="button" data-page="@(currentPage - 1)">‹</button>
            }
            else
            {
                <button type="button" class="disabled" tabindex="-1">«</button>
                <button type="button" class="disabled" tabindex="-1">‹</button>
            }
            @for (Int32 page = firstDisplayPage; page <= totalPages && page < firstDisplayPage + Model.PagesToDisplay; page++)
            {
                if (page == currentPage)
                {
                    <button type="button" class="active" data-page="@(page)">@(page)</button>
                }
                else
                {
                    <button type="button" data-page="@(page)">@(page)</button>
                }
            }
            @if (currentPage < totalPages)
            {
                <button type="button" data-page="@(currentPage + 1)">›</button>
                <button type="button" data-page="@totalPages">»</button>
            }
            else
            {
                <button type="button" class="disabled" tabindex="-1">›</button>
                <button type="button" class="disabled" tabindex="-1">»</button>
            }

            <input class="mvc-grid-pager-rows" type="hidden" value="@Model.RowsPerPage" />
        </div>
    }
    else
    {
        <input class="mvc-grid-pager-rows" type="hidden" value="@Model.RowsPerPage" />
    }
</div>