Skip to main content Skip to footer
Angular Icon

Angular Datagrid Paging

Paging, a common technique for dealing with large collections of data, from Wijmo's Angular datagrid, FlexGrid, delivers powerful capabilities for Angular applications.

Paging

Wijmo's Angular datagrid, FlexGrid, uses the CollectionView component to allow client-side paging by default. This allows you to generate datagrids that display a reasonable amount of data per page.

Paging Demo

Server-Side Paging

Wijmo includes an ODataCollectionView class that is designed to work with FlexGrid to connect your Angular application to OData data sources. Use the ODataCollectionView in conjunction with FlexGrid to implement server-based paging for OData data sources.

Server-Side Paging Demo

No Scrollbars

FlexGrid shows scrollbars automatically when the data is larger than the Angular datagrid's view range. Remove the scrollbar while maintaining scrolling functionality within FlexGrid.

No Scrollbars Demo

Fast Scroller

The iPad contact list uses a fast scroller to make it easier to find people by their initials. FlexGrid is able to implement an iOS-style scroller in this same manner. Add a vertical list of initials to the datagrid to allow users to quickly navigate to the first value that matches the request.

Fast Scroller Demo

Scrolling and ViewRange

When a user selects a cell, FlexGrid ensures that it is displayed in view by calling the scrollIntoView method. Use this method to jump to specific cells without scrolling through the Angular datagrid.

Scrolling and ViewRange Demo