Toggle Between Pagination view and Long List View in Vue

April 27 2026

Toggling between pagination view and long list view

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:

Create a CollectionView with a default pageSize to enable paging.
Provide UI controls to toggle between the paged view and the full list view.
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 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 specified number of items per page.

<template>
...

    <wj-flex-grid
      ref="grid"
      :itemsSource="cv"
      :headersVisibility="'Column'"
      :alternatingRowStep="0"
    />
  </div>
</template>

<script>
import { WjFlexGrid } from '@mescius/wijmo.vue2.grid';
import { CollectionView } from '@mescius/wijmo';

export default {
  components: { WjFlexGrid },

  data() {
    return {
      data: this.getData(),
      cv: null
    };
  },

  mounted() {
    // Initialize CollectionView with paging enabled
    this.cv = new CollectionView(this.data, {
      pageSize: 10
    });
  },

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

CollectionView wraps the raw data array.
Setting pageSize: 10 enables pagination with 10 items per page.
The FlexGrid binds directly to cv.

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

<template>
  <div>
    <div class="btn-group">
      <button @click="showPagedView">Paged View</button>
      <button @click="showFullListView">Long List View</button>
    </div>

    <wj-flex-grid
      ref="grid"
      :itemsSource="cv"
      :headersVisibility="'Column'"
      :alternatingRowStep="0"
    />
  </div>
</template>

Adjust `pageSize` and refresh the grid when the toggle changes

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

methods: {
  showPagedView() {
    this.cv.pageSize = 10;   // Enable paging
    this.cv.refresh();       // Refresh view
  },

  showFullListView() {
    this.cv.pageSize = 0;    // Disable paging (show all items)
    this.cv.refresh();       // Refresh view
  }
}