Toggle Between Pagination view and Long List View in JavaScript

Background:

FlexGrid supports client-side paging via the underlying CollectionView. You can show only a subset of items per page with paging enabled, or display the entire list of items without paging. Toggling between a pagination view (where only one page of items shows at a time) and a long list view (where all records are visible at once) simply involves adjusting the pageSize on the CollectionView and refreshing the view.

Steps to Complete:

1. Create a CollectionView with a default pageSize to enable paging.
2. Provide UI controls to toggle between the paged view and the full list view.
3. Adjust pageSize and refresh the grid when the toggle changes.

Getting Started:

Create a CollectionView with a default pageSize to enable paging

We create a CollectionView with a specified pageSize, which enables paging. The FlexGrid binds to the CollectionView instead of a raw array so paging logic is handled automatically.

...
<div id="theGrid"></div>

import * as wjcGrid from '@mescius/wijmo.grid';
import { CollectionView } from '@mescius/wijmo';

const data = getData();

// Create CollectionView with paging enabled
const cv = new CollectionView(data, {
  pageSize: 10
});

// Initialize FlexGrid with CollectionView
const grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: cv,
  headersVisibility: 'Column',
  alternatingRowStep: 0
});

function getData() {
  const items = [];
  for (let i = 1; i <= 200; i++) {
    items.push({ id: i, value: `Item ${i}` });
  }
  return items;
}

• CollectionView wraps the data array and manages paging.
• pageSize: 10 enables pagination with 10 items per page.

Provide UI controls to toggle between the paged view and the full list view

<div class="btn-group">
  <button onclick="showPagedView()">Paged View</button>
  <button onclick="showFullListView()">Long List View</button>
</div>

<div id="theGrid"></div>

Adjust pageSize and refresh the grid when the toggle changes

We define two functions that update the pageSize property on the CollectionView. Setting pageSize to a non-zero value enables pagination; setting it to 0 disables paging and displays all items.

function showPagedView() {
  cv.pageSize = 10;   // Enable paging
  cv.refresh();       // Refresh CollectionView and grid
}

function showFullListView() {
  cv.pageSize = 0;    // Disable paging (show full list)
  cv.refresh();       // Refresh CollectionView and grid
}

• Clicking Paged View restores pagination.
• Clicking Long List View disables pagination and shows the entire dataset.
• refresh() forces the grid to update immediately.

With this JavaScript setup:

• Users can toggle between a paged view and a full long list view.
• The grid updates instantly without being recreated.
• The underlying data remains unchanged, only the view behavior is modified.
• The implementation is clean and relies entirely on CollectionView.

Happy coding!