Blazor | ComponentOne
Controls / FlexGrid / Data Operations / 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. You can enable paging using C1DataCollection class which wraps another collection of C1PagedDataCollection class to be shown in pages. 

    C1DataPager can be used to navigate through different pages of data bound to FlexGrid. The following GIF shows how the FlexGrid appears after setting the paging feature.

    Paging

    The following code example demonstrate how to enable paging in FlexGrid.

    Razor
    Copy Code
    @page "/FlexGrid/paging"
    @using C1.DataCollection
    @using C1.Blazor.Core
    @using C1.Blazor.Grid
    @using C1.Blazor.DataPager
    @using Localization
    <FlexGrid ItemsSource="customers" HorizontalScrollBarVisibility="ScrollBarVisibility.Visible" IsVirtualizationEnabled="false"/>
     <C1DataPager Source="customers" />
    
    @code {
         C1PagedDataCollection<Customer> customers;
        protected override void OnInitialized()
         {
             customers = new C1PagedDataCollection<Customer>(new VirtualModeDataCollection() { PageSize = 10 });
         }
     }