Skip to main content Skip to footer
JavaScript Icon

JavaScript Datagrid Paging

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

Paging

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

Paging Demo

Server-Side Paging

Wijmo includes an ODataCollectionView class designed to work with FlexGrid to connect your JavaScript application to OData data sources. The ODataCollectionView can be used 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 view range of the JavaScript datagrid. The scrollbar can be removed while maintaining scrolling functionality within FlexGrid.

No Scrollbars Demo

Fast Scroller

The iPad contact list uses a fast scroller to make it easier to look up people by clicking their initials; FlexGrid is able to implement an iOS-style fast-scroller in this same manner. A vertical list of initials can be added to the datagrid to allow users to click and 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 the view by calling the scrollIntoView method. This can be used to jump to specific cells without the user having to scroll through the JavaScript datagrid.

Scrolling and ViewRange Demo