ComponentOne ASP.NET MVC Controls
Working with Controls / FlexGrid / Work with FlexGrid / Paging
In This Topic
    Paging
    In This Topic

    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

    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:

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

    C#
    Copy Code
    @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