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
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).
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.
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.
You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-collectionview-change-page-size