Paging lets you customize the number of items that should be displayed per page and also provides a UI for navigating through these pages. You can use paging when you are displaying a large amount of data in the grid or have a limited space in your application. It also allows you to interact more easily with the control. FlexGrid uses the DataPager control to implement paging.

The following GIF displays data in multiple pages and allows navigation through them in the FlexGrid control.

To enable paging in FlexGrid, use the following steps. This example uses Customer.cs class created in the Quick Start topic. Here, we have used C1PagedDataCollection class of the C1.DataCollection to implement paging in the grid. The C1PagedDataCollection class is a collection class which wraps another collection to be shown in pages of a maximum number of items.

1. Install the following NuGet packages from the NuGet Package Manager.
   • C1.WPF.Grid
   • C1.WPF.DataPager
2. In MainWindow.xaml, and add the FlexGrid and DataPager controls and set their names using the following code.        

   XAML	コードのコピー
   <StackPanel> <c1:FlexGrid x:Name="grid" /> <c1:C1DataPager x:Name="pager" Padding="4" Background="White" /> </StackPanel>

3. Switch to the code view and populate the FlexGrid and DataPager controls by adding the following code. In this example, FlexGrid fetches data from the Customer class and the data is bound to the grid and the pager.

   C#	コードのコピー
   //グリッドデータを作成します var gridData = Customer.GetCustomerList(500); var pagedCollection = new C1PagedDataCollection<object>(gridData); //グリッドとデータを連結します grid.ItemsSource = pagedCollection; //ページャーをデータと連結します pager.Source = pagedCollection;

The above example used a custom class to enable paging in the grid. You can also enable paging for data virtualization in FlexGrid. For more information on data virtualization, see Virtualization.