### Paging

This sample shows how to implement paged views with the FlexGrid . All the work is done by the CollectionView class used as a data source for the grid. To add paging, set the CollectionView.pageSize property, exactly as you would do in .NET. To switch pages, use the CollectionView.moveToPage method.

Note that the paging UI is implemented outside of the grid. This gives you complete control over the appearance and functionality of the paging mechanism. For example, in this sample the paging UI is implemented with the WjCollectionViewNavigator Angular 2 component and supports page navigation as well as page size. This sample also uses the WjFlexGrid and WjFlexGridColumn Angular 2 components.

Note also that the grid element has its max-height style set to 400 pixels. If the page size is small, the grid grows to accommodate its contents. If the page size is large, the grid height grows to 400 pixels and a vertical scroll bar automatically displays.

Current Page:
No Paging 5 items 10 items 20 items 30 items 50 items 100 items