Can't find what you're looking for?

Contact us or post in our forums and we'll help you find an answer.

Update CollectionView's Page Size in Angular

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

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).

data = 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.

<wj-flex-grid #flexTemp [itemsSource]="data">. . .</wj-flex-grid>
<wj-collection-view-navigator [cv]="data" [byPage]="true"></wj-collection-view-navigator>
<wj-menu [(value)]="data.pageSize" [header]="'Page Size'">
  <wj-menu-item [value]="0">No Paging</wj-menu-item>
  <wj-menu-item [value]="10">10</wj-menu-item>
  <wj-menu-item [value]="15">15</wj-menu-item>
  <wj-menu-item [value]="30">30</wj-menu-item>
  <wj-menu-item [value]="50">50</wj-menu-item>
</wj-menu>

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

Get the Latest Version of Wijmo
Download the Free Trial Now