CollectionViewNavigator

The CollectionViewNavigator control allows users to navigate the items or pages in CollectionView components.

To use it, set the navigator's cv property to the CollectionView instance it should control.

To navigate by page, set the byPage property to true. To navigate by item, set it to false.

You can customize the display of the current item/page by setting the navigator's headerFormat property.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { CollectionView } from '@grapecity/wijmo'; import { ComboBox, CollectionViewNavigator } from '@grapecity/wijmo.input'; import { FlexGrid } from '@grapecity/wijmo.grid'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the CollectionView let view = new CollectionView(getData(), { pageSize: 5 }); // allow user to change the CollectionView's page size new ComboBox('#cmb-pg-size', { itemsSource: [0, 5, 10], selectedValue: view.pageSize, textChanged: (s) => { view.pageSize = s.selectedValue; } }); // navigate the CollectionView by item (within the current page) new CollectionViewNavigator('#cv-nav', { cv: view, headerFormat: 'Item {currentItem:n0} of {itemCount:n0} (on page {currentPage:n0})' }); // navigate the CollectionView by page new CollectionViewNavigator('#cv-pg', { cv: view, byPage: true, headerFormat: 'Page {current:n0} of {count:n0}' }); // show the data in a grid new FlexGrid('#cv-grid', { itemsSource: view, selectionMode: 'RowRange', showMarquee: true }); // get the data for the CollectionView function getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), names = 'Abe,Bob,Chuck,Dan,Ed,Fred'.split(','), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionViewNavigator</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label for="cmb-pg-size">Page Size</label> <input id="cmb-pg-size" /><br /> <label for="cv-nav">Navigate By Item</label> <input id="cv-nav" /><br /> <label for="cv-pg">Navigate By Page</label> <input id="cv-pg" /><br /> <div id="cv-grid"></div> </div> </body> </html> label { width: 150px; text-align: right; margin-right: 6px; margin-bottom: 12px; } .wj-flexgrid { max-height: 350px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { CollectionView } from '@grapecity/wijmo'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { view = new CollectionView(this.getData(), { pageSize: 5 }); getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), names = 'Abe,Bob,Chuck,Dan,Ed,Fred'.split(','), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } @NgModule({ imports: [WjInputModule, WjGridModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionViewNavigator</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="app container-fluid"> <label htmlFor="cmb-pg-size">Page Size</label> <wj-combo-box id="cmb-pg-size" #combo [itemsSource]="[0, 5, 10]" [selectedValue]="view.pageSize" (textChanged)="view.pageSize = combo.selectedValue"> </wj-combo-box> <br /> <label htmlFor="cv-nav">Navigate By Item</label> <wj-collection-view-navigator [cv]="view" [headerFormat]="'Item {currentItem:n0} of {itemCount:n0} (on page {currentPage:n0})'"> </wj-collection-view-navigator> <br /> <label htmlFor="cv-pg">Navigate By Page</label> <wj-collection-view-navigator [cv]="view" [byPage]="true" [headerFormat]="'Page {current:n0} of {count:n0}'"> </wj-collection-view-navigator> <br /> <wj-flex-grid [itemsSource]="view" [selectionMode]="'RowRange'" [showMarquee]="true"> </wj-flex-grid> </div> label { width: 150px; text-align: right; margin-right: 6px; margin-bottom: 12px; } .wj-flexgrid { max-height: 350px; } <template> <div class="app container-fluid"> <label htmlFor="cmb-pg-size">Page Size</label> <wj-combo-box id="cmb-pg-size" :itemsSource="[0, 5, 10]" :selectedIndex="1" :textChanged="cbTextChanged"/> <br /> <label htmlFor="cv-nav">Navigate By Item</label> <wj-collection-view-navigator :cv="view" :headerFormat="'Item {currentItem:n0} of {itemCount:n0} (on page {currentPage:n0})'"/> <br /> <label htmlFor="cv-pg">Navigate By Page</label> <wj-collection-view-navigator :cv="view" :byPage="true" :headerFormat="'Page {current:n0} of {count:n0}'"/> <br /> <wj-flex-grid :itemsSource="view" :selectionMode="'RowRange'" :showMarquee="true"/> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import 'src/app.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.grid'; import { CollectionView } from '@grapecity/wijmo'; //let App = Vue.extend({ new Vue({ el: "#app", // component state data: function() { return { view: new CollectionView(this.getData(), { pageSize: 5 }) }; }, // component methods methods: { getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), names = 'Abe,Bob,Chuck,Dan,Ed,Fred'.split(','), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; }, cbTextChanged(cb) { this.view.pageSize = cb.selectedValue; } } }); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionViewNavigator</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { CollectionView } from '@grapecity/wijmo'; import { ComboBox, CollectionViewNavigator } from '@grapecity/wijmo.react.input'; import { FlexGrid } from '@grapecity/wijmo.react.grid'; class App extends React.Component { constructor(props) { super(props); this.state = { view: new CollectionView(this.getData(), { pageSize: 5 }) }; } render() { return <div className="container-fluid"> <label htmlFor="cmb-pg-size">Page Size</label> <ComboBox id="cmb-pg-size" itemsSource={[0, 5, 10]} selectedValue={this.state.view.pageSize} textChanged={s => this.state.view.pageSize = s.selectedValue}/> <br /> <label htmlFor="cv-nav">Navigate By Item</label> <CollectionViewNavigator cv={this.state.view} headerFormat={'Item {currentItem:n0} of {itemCount:n0} (on page {currentPage:n0})'}/> <br /> <label htmlFor="cv-pg">Navigate By Page</label> <CollectionViewNavigator cv={this.state.view} byPage={true} headerFormat={'Page {current:n0} of {count:n0}'}/> <br /> <FlexGrid itemsSource={this.state.view} selectionMode={'RowRange'} showMarquee={true}/> </div>; } // get the data for the CollectionView getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), names = 'Abe,Bob,Chuck,Dan,Ed,Fred'.split(','), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionViewNavigator</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> label { width: 150px; text-align: right; margin-right: 6px; margin-bottom: 12px; } .wj-flexgrid { max-height: 350px; }