Toggle Between Pagination view and Long List View in Angular

Background:

FlexGrid supports client-side paging via the underlying CollectionView. You can show only a subset of items per page with paging controls, 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 grid’s view accordingly.

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.

Getting Started:

Create a CollectionView with a default pageSize to enable paging

We create a CollectionView with a set pageSize, which tells FlexGrid to paginate the data. Assign this CollectionView instead of a raw array to itemsSource. The grid will only show the first n items per page until the user toggles the view.

<!-- app.component.html -->
...

<wj-flex-grid
  #grid
  [itemsSource]="cv"
  [headersVisibility]="'Column'"
  [alternatingRowStep]="0">
</wj-flex-grid>

// app.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { FlexGrid } from '@mescius/wijmo.angular2.grid';
import { CollectionView } from '@mescius/wijmo';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {

  @ViewChild('grid', { static: true }) grid: FlexGrid;
  data = this.getData();
  cv: any;

  ngAfterViewInit() {
    // Create a CollectionView with a default pageSize, enabling pagination
    this.cv = new CollectionView(this.data, { pageSize: 10 });
  }

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

• CollectionView wraps the data and provides paging support.
• Setting pageSize: 10 means the grid shows 10 items per page.
• The FlexGrid binds directly to the CollectionView.

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

We expose two methods that update the pageSize on the CollectionView. Setting pageSize to a non-zero value enables pagination; setting it to 0 disables paging and shows all items. After changing pageSize, we call refresh() so FlexGrid re-renders with the new view mode.

<!-- app.component.html -->
<div class="btn-group">
  <button (click)="showPagedView()">Paged View</button>
  <button (click)="showFullListView()">Long List View</button>
</div>

...

// app.component.ts (continued)
showPagedView() {
  this.cv.pageSize = 10;   // restore pagination
  this.cv.refresh();       // update CollectionView and grid
}

showFullListView() {
  this.cv.pageSize = 0;    // 0 = no paging, show full list
  this.cv.refresh();       // update the grid
}

• Clicking Paged View sets pageSize = 10.
• Clicking Long List View sets pageSize = 0, showing all items in one scrollable list.

With this Angular setup:

• Users can easily switch between a paged view (e.g., 10 items at a time) and a full scrollable list.
• The grid automatically updates to show the current page or full dataset.
• Toggling does not destroy or recreate the grid, it only modifies the underlying data view.

Happy coding!