WinUI | ComponentOne
Controls / FlexGrid / Performance / Paging
In This Topic
    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.

    The DataPager control 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.

    The ComponentOne WinUI DataPager provides paging to collections so that they may be displayed in smaller pages.

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

    public PageCollection()
                //VirtualModeDataCollection PageSize determines the number of items that are requested per "Page"
                 // And C1PagedDataCollection's PageSize is the maximum number of items that will be exposed in the collection
                var pagedCollection = new C1PagedDataCollection<object>(new VirtualModeDataCollection() { PageSize = 35 });
                 pagedCollection.PageSize = 7;
                 flexGrid1.ItemsSource = pagedCollection;
                 pager.Source = pagedCollection;
            internal class VirtualModeDataCollection : C1VirtualDataCollection<Customer>
                 protected override async Task<Tuple<int, IReadOnlyList<Customer>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default(CancellationToken))
                     await Task.Delay(1000, cancellationToken);//Simulates network traffic.
                     return new Tuple<int, IReadOnlyList<Customer>>(2_000_000, Enumerable.Range(startingIndex, count).Select(i => new Customer(i)).ToList());
            <c1:FlexGrid x:Name="flexGrid1"  VerticalScrollBarVisibility="Auto"/>
            <pager:C1DataPager x:Name="pager" Padding="4"/>