# Paging

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid supports **Pager** control through which you can implement paging. Through paging, you can customize the number of items that should be displayed per page and provide a UI for navigating the pages in the grid.

To implement paging in FlexGrid using **Pager** control, you need to

*   set the **Id** of the FlexGrid,
*   set the **Owner** property of Pager control, and
*   set the **PageSize** property.

By setting the **Owner** property of Pager control, the control binds to the FlexGrid and provides function to change the current page of the FlexGrid by clicking these buttons - '**<<**', '**<**', '**\>**', '**\>>**'. By setting the **PageSize** property, the specified number of items you want on each page are displayed.

The following image shows how the FlexGrid appears after setting the **PageSize** property. The example uses Sale.cs model, which was added to the application in the [Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart):

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridpaging.png)

The following code examples demonstrate how to enable Paging using Pager control in FlexGrid.

```csharp
@using C1MvcWebAppPager.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@* Set the ID for FlexGrid *@
@(Html.C1().FlexGrid<Sale>()
    .Id("pagerFlexGrid") 
    .AutoGenerateColumns(false)
    .IsReadOnly(true)
    .Height(450)
    .Width(700)
    .AllowAddNew(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
    .CssClass("grid")
    .Bind(Model)
    .PageSize(10)
    .Columns(bl =>
       {
           bl.Add(cb => cb.Binding("ID"));
           bl.Add(cb => cb.Binding("Start"));
           bl.Add(cb => cb.Binding("Product"));
           bl.Add(cb => cb.Binding("Amount").Format("c"));
           bl.Add(cb => cb.Binding("Discount").Format("p0"));
           bl.Add(cb => cb.Binding("Active"));
       })
)
@* Set the Owner property of Pager  *@
@(Html.C1().Pager().Owner("pagerFlexGrid"))
```

## See Also

[Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart)

**Reference**

[Pager Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Pager.html)

[FlexGridBase\<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.html)