[DataGrid] [DataGridSample] Customize DataGrid Pagination

To customize DataGrid's pagination the first thing to be done is turn off the default DataGrid's Pagination, this way you can handle the pagination by your own.

Below we defined requirements as an example:

  1. Have Back and Next buttons
  2. A message displaying the start to end position, and how many items are available
  3. Have buttons per page
  4. Page size can be changed by user, available options 10, 100 and 200

The layout sample:

The requirements 1 and 2 (buttons Back/Next and the display message), can be easily achieved by blocks already available under DataGridComponent > Pagination.

Requirements 3 and 4 (Buttons per page and and page size) will have to be done by JavaScript, doing so we can be freely opened for extensions.

Inspect our page to see the defined JavaScript. The object customGridPage describe the actions bellow:

  • changePageSize: Responsible to define Grid's page size. Is called during initialization and by the On Change event of the DropDown View
  • createPageButtons: Responsible to create the page-buttons. Is triggered whenever page changes
  • goToPage: Navigate to an specific page. Used by page-buttons to navigate through pages

To manipulate the pagination we will use the GridOS.GridObject[0].view, a CollectionView binded to our grid, for more detailed documentation about this object access wijmo.CollectionView.

  • Playing with DataGrid through DevTools you can use GridOS.GridObject [<Grid INDEX>], but in your official development we recommend you to use the GridOS.ComponentUtils.getGridObjectById (<Grid.Id>) to retrieve the main object, doing so you won't depend on declaration's order on your screen

Hope this could help you to improve your project, and can be used as a start for you to play with DataGrid's pagination.


Rank: #3522

The sample above was missing a Pagination-Update after filtering data.

Issue fixed on this version.