Update CollectionView's Page Size in React

Background:

You may want to give users the ability to change the number of items that the CollectionView displays in FlexGrid. We can easily tie Wijmo’s Menu control to the CollectionView to allow users to easily update the number of items displayed by the grid.

Steps to Complete:

1. Create a CollectionView control and give it a starting page size

2. Use the CollectionView for the data source of the FlexGrid, the CollectionView Navigator, and then the CollectionView’s pageSize property as the Menu value

3. Tie a method to the Menu’s itemClicked event and update the pageSize inside of that method

Getting Started

Create a CollectionView control and give it a starting page size

First, we’ll need to create a CollectionView control in TypeScript. This CollectionView will get used as the data source for the FlexGrid, the Navigator (which will allow users to navigate through all of the pages) and the Menu (which the user will use to change the size of the pages of the control).

cv = new wjcCore.CollectionView(this.getData(100), {
  pageSize: 10
});

Use the CollectionView for the data source of the FlexGrid and the CollectionView Navigator, and use the CollectionView’s pageSize property as the Menu value

Next, we’ll be using that CollectionView as the data source for 3 separate controls. By tying the CollectionView itself to the grid and navigator, it will get used to display data and allow the user to navigate said data. By tying the pageSize property to the menu, we can update both the grid and the navigator simultaneously when the user changes the menu.

<wjGrid.FlexGrid itemsSource={this.cv}>. . .</wj-flex-grid>
<wjInput.CollectionViewNavigator cv={this.cv} byPage={true}}></wj-collection-view-navigator>
<wjInput.Menu header="Page Size" value={this.cv.pageSize} itemClicked={this.pageSizeChanged.bind(this)}>
  <wjInput.MenuItem value={0}>No Paging</wjInput.MenuItem>
  <wjInput.MenuItem value={10}>10</wjInput.MenuItem>
  <wjInput.MenuItem value={15}>15</wjInput.MenuItem>
  <wjInput.MenuItem value={30}>30</wjInput.MenuItem>
  <wjInput.MenuItem value={50}>50</wjInput.MenuItem>
</wj-menu>

Tie a method to the Menu’s itemClicked event and update the pageSize inside of that method

Finally, we’ll update the pageSize of the CollectionView inside of the method that we’ve tied to the Menu’s itemClicked event.

pageSizeChanged(sender) {
  if(sender.selectedItem) {
    this.cv.pageSize = sender.selectedValue;
  }
}

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-collectionview-change-page-size