Change pager position to top of the grid...

Jun 10, 2014 at 9:47 AM
How can I change the pager position to the top of the grid, I have hunted through the following CSS but can see no obvious way of doing this.

bootstrap.css
gridmvc.css

the pager is surrounded by divs

grid_footer
grid_pager


Is there a setting on the actual Grid that can be used? Ideally Id like the pager to be at the top and the bottom of the grid.
Coordinator
Jun 22, 2014 at 7:37 AM
Hi,
You can modify grid layout in the Shared/_Grid.cshtml file
Jul 4, 2014 at 11:31 AM
Thanks - but everything I try results in the pager being at the bottom of the page, Ive tried moving the call to RenderGridPager() but ut will still only display at the bottom of the grid, surely this is possible, code below...


@using GridMvc.Columns
@model GridMvc.IGrid
@if (Model == null) { return; }
@if (Model.RenderOptions.RenderRowsOnly)
{
@RenderGridBody();
}
else
{
<div class="grid-mvc" data-lang="@Model.Language" data-gridname="@Model.RenderOptions.GridName" data-selectable="@Model.RenderOptions.Selectable.ToString().ToLower()" data-multiplefilters ="@Model.RenderOptions.AllowMultipleFilters.ToString().ToLower()">
    <div class="grid-wrap">
        <table class="table table-striped grid-table">
            @* Draw grid header *@
            <thead>
                @RenderGridHeader()
            </thead>
            <tbody>
                @RenderGridBody()
            </tbody>
        </table>
__ @RenderGridPager()__
    </div>
</div>
}
@helper RenderGridBody()
{
if (!Model.ItemsToDisplay.Any())
{
<tr class="grid-empty-text">
    <td colspan="@Model.Columns.Count()">
        @Model.EmptyGridText
    </td>
</tr>
}
else
{
    foreach (object item in Model.ItemsToDisplay)
    {
<tr class="grid-row @Model.GetRowCssClasses(item)">
    @foreach (IGridColumn column in Model.Columns)
    {
        @column.CellRenderer.Render(column, column.GetCell(item))
    }
</tr>
    }
}
}
@helper RenderGridHeader()
{
<tr>
    @foreach (IGridColumn column in Model.Columns)
    {
        @column.HeaderRenderer.Render(column)
    }
</tr>
}
@helper RenderGridPager()
{
if (Model.EnablePaging && Model.Pager != null)
{
<div class="grid-footer">
    @Html.Partial(Model.Pager.TemplateName, Model.Pager)
</div>
}
}
Jul 8, 2014 at 3:48 PM
Edited Jul 8, 2014 at 3:51 PM
Webinspired,

had the same problem and solved it:

1) in _Grid.cshtml move @RenderGridPager() to above the table
        <div class="grid-wrap">
            @RenderGridPager()
            <table class="table table-striped grid-table table-fixed">
                @* Draw grid header *@
                <thead>
                    @RenderGridHeader()
                </thead>
                <tbody>
                    @RenderGridBody()
                </tbody>
            </table>
        </div>
2) in RenderGridPager() change
    if (Model.EnablePaging && Model.Pager != null)
to
    if (Model.EnablePaging && Model.Pager != null && Model.ItemsToDisplay.Any())
the Call to Model.ItemsToDisplay.Any() triggers the processing of the items and populates the pager information.

This helped me.