Paging

How it works

You need to pass collection of the items, that should be displayed in the grid. After that grid will "cut" only displaying page.

If your data source is database (for example) you need to pass IQueryable<T> collection to the grid.
Grid.Mvc uses IQueryable<T> interface to construct query expressions to your data collection.

When you go to some page the grid invokes .Skip(N).Take(N) methods and when you sort data the grid invokes OrderBy or OrderByDescending methods etc.

If you pass IQueryable collection produced by ORM (like Entity Framework) - the ORM will translate query to database (SQL queries). In this case Grid.Mvc queries only one page of data, that currently displayed.

How to configure

To enable paging of you Grid can call "WithPaging" method in your View and specify page size and other parameters:

@Html.Grid(Model).Columns(columns =>
                    {
                        columns.Add(foo => foo.Title).Titled("Custom column title").SetWidth(110);
                        columns.Add(foo => foo.Description).Sortable(true);
                    }).WithPaging(20)

Also if you derive you own Grid - to enable paging set 'EnablePaging' property to 'true'. Use 'Pager' object to configure paging options in your Grid:

public class FooGrid : Grid<Foo>
{
    public FooGrid(IQueryable<TestModel> items) : base(items)
    {
              Columns.Add(foo => foo.Title).Sortable(true);
	Columns.Add(foo => foo.Description).Sortable(true);

	EnablePaging = true;
	Pager.PageSize = 10;
    }
}

Pager options

Property name Property type Description
PageSize Int32 Setup the page size for displaying items in the grid

Read more: Creating custom columns in Grid.Mvc

Last edited Sep 25, 2013 at 9:46 AM by Bukharin, version 10