This project is read-only.

Custom page sizing

Feb 4, 2014 at 8:34 AM
Edited Feb 4, 2014 at 8:34 AM
Hi,

Firstly I'd like to say Grid.Mvc is great, and I really appreciate the work you've done.

I was wondering if there is a way, or if you could suggest a way for me to be able to create custom page sizing while using the pagination.

I would like the user to be able to select and option from a drop down list, and this then set how many items are displayed on a page. e.g
<select>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
</select>
Many Thanks,
Matt
Feb 5, 2014 at 3:57 AM
Hi,

Try to pass selected page size to the view model like:
@Html.Grid(Model).Columns(...).WithPaging(ViewBag.PageSize);
Also you can fill ViewBag.PageSize in the controller action like:
public ActionResult Index()
        {
            int pagesize;
            if (!int.TryParse(Request.QueryString["pagesize"], out pagesize))
                pagesize = 10;
            ViewBag.PageSize = pagesize;
           // return view with grid model

}
Now you can query different page size, like

/?pagesize=10
/?pagesize=50
etc.
Feb 5, 2014 at 8:52 AM
Excellent, thank you very much for your quick and helpful response.

I was unsure that this would persist after changing filters and page number etc, but this has done the trick.

Cheers,
Matt
Sep 3, 2015 at 8:45 PM
Edited Sep 3, 2015 at 8:57 PM
Hi,
Maybe, must change partial view _GridPager.cshtml:
    @if (Model.CurrentPage < Model.PageCount)
        {
        <li><a href="@Model.GetLinkForPage(Model.CurrentPage + 1)">»</a></li>
    }
    @if (ViewBag.PageSize != null)
        {
        <li>
            @using (Html.BeginForm(null, null, FormMethod.Get))
            {
                <div class="form-inline">
                    <span> &emsp; Page size</span>
                    @Html.DropDownList("pagesize", new List<SelectListItem>
                       {
                            new SelectListItem { Value = "10", Text="10", Selected = (ViewBag.PageSize == 10)},
                            new SelectListItem { Value = "20", Text="20", Selected = (ViewBag.PageSize == 20)},
                            new SelectListItem { Value = "50", Text="50", Selected = (ViewBag.PageSize == 50)},
                            new SelectListItem { Value = "100", Text="100", Selected = (ViewBag.PageSize == 100)},
                            new SelectListItem { Value = "1000", Text="1000", Selected = (ViewBag.PageSize == 1000)},
                       },
                    new { @class = "form-control", onchange = "submit();" })
                </div>
            }
        </li>
    }
</ul>
Apr 15, 2016 at 4:16 PM
hey,
Could you please put full code of the partial page??

im attaching my partial page code....
please let me know how this can be implemented in my page....
@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
        @Html.AntiForgeryToken()

        <ul class="nav navbar-nav navbar-right">
            <li>
                @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}