Toggle Between Pagination view and Long List View in React

Background:

When working with large amounts of data, loading that data into a data grid takes time. This situation is perfect for using pagination, although some users may want the functionality to toggle between a pagination view and the default list view.

Steps to Complete:

1. Set pageSize property

2. Add toggle functionality button

Getting Started:

Set pageSize property

You can add pagination view to the grid by setting the pageSize property value on the grid's collectionView. For this example, we set the number to 10.

data.pageSize = data.pageSize == 10

Add toggle functionality button

To toggle paging on the grid, set the pagesize to 0 when you want to remove paging.

data.pageSize = data.pageSize == 10 ? 0 : 10;

To persist the selection of rows during the toggle, you'll have to handle the itemChecked event of the Selector and pageChanged event of the collection to keep track of the selected rows and update them when the page changes.

let selector = new Selector(grid, {
   itemChecked: (s, e) => {
     grid.rows.forEach((row) => {
       row.dataItem.sel = row.isSelected; // keep track of selected items
     });
   },
 });

 grid.collectionView.pageChanged.addHandler((s, e) => {
   for (let i = 0; i < grid.rows.length; i++) {
     if (grid.collectionView.items[i].sel == true) {
       grid.rows[i].isSelected = true; // select rows again when page changes
     }
   }
 });

Please note, this implementation will work as expected for client-side paging, although if you are using server-side paging it can affect the grid's performance. This is due to requests being sent to the server each time when the paging is toggled, and when paging is removed it will fetch all the data from the server, which may cause delay in performance depending on the amount of data fetched. However, it should work smoothly if you have all the data available on the client-side.

The code for this example application can be found here.

Happy coding!