dgrid pagination example

Question

Can anyone point me to an example of using the Pagination extension of dgrid with a dgrid? This could be a reference link or a simple example you type up. I've defined it in my code, used it with an OnDemandGrid where it is added to the declare mixin for my custom grid. I see arrows for page navigation, I see the page size setting menu, but my specification of rowsPerPage: 3 does nothing. I still see my 7 sample records.

I'm using a modified Cache (data object store) that wraps a JsonRest and Memory store for my dgrid.

Answer 1

I think the issue is that you can't use OnDemandGrid with pagination since the OnDemandGrid has it's own internal virtual paging logic. From the dgrid extensions wiki:

In contrast to the OnDemandList and OnDemandGrid modules, the Pagination extension implements classic discrete paging controls. It displays a certain number of results at a given time, and provides a footer area with controls to switch between pages.

Note: the Pagination extension should be mixed into List or Grid, not one of the OnDemand constructors, since those contain their own virtual scrolling logic. Internally, Pagination inherits from the same _StoreMixin module inherited by the OnDemand prototypes for common integration with dojo/store.

What you want to do instead is mixin Pagination into a plain Grid. The Pagination Mixin includes the properties you're interested in such as number of rows. The Paginator extension handles talking to the provided store for retrieving and rendering the set of rows to display. A define for a class like that might look like:

define(['dojo/_base/declare','dgrid/Grid', 'dgrid/extensions/Pagination'],function(declare,Grid,Pagination){
    return declare('mine.PaginatedGrid',[Grid,Pagination],{
      //various default you can set
      pagingLinks: false,
      pagingTextBox: true,
      firstLastArrows: true,
      minRowsPerPage: 5,
      rowsPerPage: 5,
      pageSizeOptions: [5, 10, 15, 25, 50, 100]
    });
});

Answer 2

The best examples of DGrid and its extensions can be found in the test folder of the DGrid project. They can be found here:

• DGrid Tests

Specifically the Paginations Tests can be found:

• Here,
• here,
• and here

To run them:

1. Clone the git repo
2. Drop it on your webserver
3. Navigate to the html page