グリッド:高速スクロール

iOSの連絡先リストは、高速スクロールバーを使用して、頭文字をクリックすることで簡単に人を探すことができます。このサンプルは、グリッドの右端付近に頭文字の垂直リストを追加することによって同様のことを実現します。ユーザーが頭文字をクリックまたは入力すると、グリッドがスクロールして、リクエストに一致する最初の連絡先が表示されます。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the data let data = []; var first = 'Adeline,Alexander,Alice,Amelia,Andrew,Arabella,Aria,Aryan,Asher,Astrid,Audrey,Aurelia,Aurora,Austin,Ava,Axel,Benjamin,Bodhi,Caleb,Callum,Caroline,Charlotte,Chloe,Claire,Cora,Daniel,Declan,Eleanor,Eli,Elijah,Elise,Elizabeth,Ella,Eloise,Emily,Emma,Esme,Ethan,Evangeline,Ezra,Felix,Finn,Genevieve,Grace,Hazel,Henry,Imogen,Isaac,Isabella,Isla,Ivy,Jack,Jacob,James,Jane,Jasper,John,Julian,Khaleesi,Leo,Levi,Liam,Lucas,Lucy,Luke,Luna,Lydia,Maeve,Matthew,Maxwell,Maya,Mia,Mila,Miles,Milo,Nathaniel,Nora,Oliver,Olivia,Ophelia,Oscar,Penelope,Roman,Rose,Sadie,Samuel,Scarlett,Sebastian,Silas,Soren,Stella,Thea,Theodore,Thomas,Violet,William,Wyatt,Xavier,Zachary'.split(','); var last = 'Adams,Alexander,Allen,Anderson,Bailey,Baker,Barnes,Bell,Bennett,Black,Boyd,Brooks,Brown,Bryant,Burns,Butler,Campbell,Carter,Clark,Cole,Coleman,Collins,Cook,Cooper,Cox,Crawford,Cruz,Daniels,Davis,Diaz,Dixon,Edwards,Ellis,Evans,Fisher,Flores,Ford,Foster,Freeman,Garcia,Gibson,Gomez,Gonzales,Gonzalez,Gordon,Graham,Gray,Green,Griffin,Hall,Hamilton,Harris,Harrison,Hayes,Henderson,Henry,Hernandez,Hicks,Hill,Holmes,Howard,Hughes,Hunt,Hunter,Iachetta,Jackson,James,Jenkins,Johnson,Jones,Jordan,Kelly,Kennedy,King,Lee,Lewis,Long,Lopez,Marshall,Martin,Martinez,Mason,Mcdonald,Miller,Mitchell,Moore,Morales,Morgan,Morris,Murphy,Murray,Myers,Nelson,Ortiz,Owens,Parker,Patterson,Perez,Perry,Peterson,Phillips,Porter,Powell,Price,Quaid,Ramirez,Ramos,Reed,Reyes,Reynolds,Rice,Richardson,Rivera,Roberts,Robertson,Robinson,Rodriguez,Rogers,Ross,Russell,Sanchez,Sanders,Scott,Shaw,Simmons,Simpson,Smith,Stevens,Stewart,Sullivan,Taylor,Thomas,Thompson,Torres,Tucker,Turner,Udell,Valentine,Vaughan,Vickers,Walker,Wallace,Ward,Warren,Washington,Watson,Webb,Wells,West,White,Williams,Wilson,Wood,Woods,Wright,Xanders,Xavier,Young,Zabinski,Zacharias'.split(','); for (var i = 0; i < 1000; i++) { data.push({ first: first[Math.floor(Math.random() * first.length)], last: last[Math.floor(Math.random() * last.length)], }); } // // group and sort it with a CollectionView var view = new wjCore.CollectionView(data, { sortDescriptions: ['last', 'first'], groupDescriptions: [ new wjCore.PropertyGroupDescription('last', function (item, propName) { return item[propName][0]; }) ] }); view.moveCurrentToFirst(); // // show the data in a FlexGrid var theGrid = new wjGrid.FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'last', width: '*' } ], headersVisibility: 'None', alternatingRowStep: 0, isReadOnly: true, itemsSource: view, formatItem: function (s, e) { if (e.panel == s.cells && s.columns[e.col].binding == 'last') { var row = s.rows[e.row]; var item = s.rows[e.row].dataItem; e.cell.innerHTML = row instanceof wjGrid.GroupRow ? wjCore.format('&nbsp;&nbsp;<b>{name}</b>', item) : wjCore.format('{first} <b>{last}</b>', item); } } }); // // create the fast scroller element var theScroller = document.createElement('div'); theScroller.classList.add('fast-scroller'); for (var i = 65; i <= 90; i++) { var initial = wjCore.createElement('<div>' + String.fromCharCode(i) + '</div>'); theScroller.appendChild(initial); } theGrid.hostElement.firstElementChild.appendChild(theScroller); theScroller.addEventListener('mousedown', function (e) { // // get initial we're looking for var initial = e.target.textContent; scrollTo(initial); e.preventDefault(); }); // // allow scrolling by typing the initial as well theGrid.hostElement.addEventListener('keypress', function (e) { scrollTo(String.fromCharCode(e.keyCode)); }); // // scroll the grid to show a given initial function scrollTo(initial) { if (initial.length == 1) { initial = initial.toUpperCase(); for (var i = 0; i < theGrid.rows.length; i++) { var row = theGrid.rows[i]; if (row instanceof wjGrid.GroupRow && row.dataItem.name == initial) { var rc = theGrid.cells.getCellBoundingRect(i, 0, true); var pt = theGrid.scrollPosition; // // scroll with animation if (true) { wjCore.animate(function (pct) { var y = (pt.y * (1 - pct)) + (-rc.top * pct); theGrid.scrollPosition = new wjCore.Point(pt.x, y); }, 300); } else { // or without theGrid.scrollPosition = new wjCore.Point(pt.x, -rc.top); } break; } } } } // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Fast Scroller</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"> <div id="theGrid"> </div> </div> </body> </html> .wj-flexgrid { font-size: 120%; height: 80vh; } .wj-flexgrid .wj-cell { padding: 6px; border: none; } .wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #f0f0f0; } .fast-scroller { display: flex; flex-flow: column wrap; height: 100%; padding: 2em 0; justify-content: center; align-items: center; position: absolute; top: 0; right: 2.5em; cursor: pointer; font-size: 80%; font-weight: 800; color: navy; opacity: .5; } .fast-scroller div { text-align: center; padding: 0 3px; } body { margin-bottom: 20px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: wjcCore.CollectionView; constructor() { this.data = this._getData(); } @ViewChild('flex') flex: wjcGrid.FlexGrid; ngOnInit() { // create the fast scroller element let theScroller = document.createElement('div'); theScroller.classList.add('fast-scroller'); for (let i = 65; i <= 90; i++) { let initial = wjcCore.createElement('<div>' + String.fromCharCode(i) + '</div>'); theScroller.appendChild(initial); } this.flex.hostElement.firstElementChild.appendChild(theScroller); theScroller.addEventListener('mousedown', (e) => { // get initial we're looking for let initial = (<HTMLDivElement>e.target).textContent; this._scrollTo(initial); e.preventDefault(); }); // // allow scrolling by typing the initial as well this.flex.hostElement.addEventListener('keypress', (e) => { this._scrollTo(String.fromCharCode(e.keyCode)); }); } initializeGrid(flex: wjcGrid.FlexGrid) { flex.formatItem.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) => { if (e.panel == s.cells && s.columns[e.col].binding == 'last') { let row = s.rows[e.row]; let item = s.rows[e.row].dataItem; e.cell.innerHTML = row instanceof wjcGrid.GroupRow ? wjcCore.format('&nbsp;&nbsp;<b>{name}</b>', item) : wjcCore.format('{first} <b>{last}</b>', item); } }); } // scroll the grid to show a given initial private _scrollTo(initial: string) { if (initial.length == 1) { initial = initial.toUpperCase(); for (let i = 0; i < this.flex.rows.length; i++) { let row = this.flex.rows[i]; if (row instanceof wjcGrid.GroupRow && row.dataItem.name == initial) { let rc = this.flex.cells.getCellBoundingRect(i, 0, true); let pt = this.flex.scrollPosition; wjcCore.animate((pct: number) => { let y = (pt.y * (1 - pct)) + (-rc.top * pct); this.flex.scrollPosition = new wjcCore.Point(pt.x, y); }, 300); break; } } } } private _getData() { let data = []; let first = 'Adeline,Alexander,Alice,Amelia,Andrew,Arabella,Aria,Aryan,Asher,Astrid,Audrey,Aurelia,Aurora,Austin,Ava,Axel,Benjamin,Bodhi,Caleb,Callum,Caroline,Charlotte,Chloe,Claire,Cora,Daniel,Declan,Eleanor,Eli,Elijah,Elise,Elizabeth,Ella,Eloise,Emily,Emma,Esme,Ethan,Evangeline,Ezra,Felix,Finn,Genevieve,Grace,Hazel,Henry,Imogen,Isaac,Isabella,Isla,Ivy,Jack,Jacob,James,Jane,Jasper,John,Julian,Khaleesi,Leo,Levi,Liam,Lucas,Lucy,Luke,Luna,Lydia,Maeve,Matthew,Maxwell,Maya,Mia,Mila,Miles,Milo,Nathaniel,Nora,Oliver,Olivia,Ophelia,Oscar,Penelope,Roman,Rose,Sadie,Samuel,Scarlett,Sebastian,Silas,Soren,Stella,Thea,Theodore,Thomas,Violet,William,Wyatt,Xavier,Zachary'.split(','); let last = 'Adams,Alexander,Allen,Anderson,Bailey,Baker,Barnes,Bell,Bennett,Black,Boyd,Brooks,Brown,Bryant,Burns,Butler,Campbell,Carter,Clark,Cole,Coleman,Collins,Cook,Cooper,Cox,Crawford,Cruz,Daniels,Davis,Diaz,Dixon,Edwards,Ellis,Evans,Fisher,Flores,Ford,Foster,Freeman,Garcia,Gibson,Gomez,Gonzales,Gonzalez,Gordon,Graham,Gray,Green,Griffin,Hall,Hamilton,Harris,Harrison,Hayes,Henderson,Henry,Hernandez,Hicks,Hill,Holmes,Howard,Hughes,Hunt,Hunter,Iachetta,Jackson,James,Jenkins,Johnson,Jones,Jordan,Kelly,Kennedy,King,Lee,Lewis,Long,Lopez,Marshall,Martin,Martinez,Mason,Mcdonald,Miller,Mitchell,Moore,Morales,Morgan,Morris,Murphy,Murray,Myers,Nelson,Ortiz,Owens,Parker,Patterson,Perez,Perry,Peterson,Phillips,Porter,Powell,Price,Quaid,Ramirez,Ramos,Reed,Reyes,Reynolds,Rice,Richardson,Rivera,Roberts,Robertson,Robinson,Rodriguez,Rogers,Ross,Russell,Sanchez,Sanders,Scott,Shaw,Simmons,Simpson,Smith,Stevens,Stewart,Sullivan,Taylor,Thomas,Thompson,Torres,Tucker,Turner,Udell,Valentine,Vaughan,Vickers,Walker,Wallace,Ward,Warren,Washington,Watson,Webb,Wells,West,White,Williams,Wilson,Wood,Woods,Wright,Xanders,Xavier,Young,Zabinski,Zacharias'.split(','); for (let i = 0; i < 1000; i++) { data.push({ first: first[Math.floor(Math.random() * first.length)], last: last[Math.floor(Math.random() * last.length)], }); } // group and sort it with a CollectionView let view = new wjcCore.CollectionView(data, { sortDescriptions: ['last', 'first'], groupDescriptions: [ // group by last name's initial new wjcCore.PropertyGroupDescription('last', (item: any, propName: string) => { return item[propName][0]; }) ] }); return view; } } // @NgModule({ imports: [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 Wijmo FlexGrid Fast Scroller</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="container-fluid"> <wj-flex-grid #flex [headersVisibility]="'None'" [alternatingRowStep]="0" [isReadOnly]="true" (initialized)="initializeGrid(flex)" [(itemsSource)]="data"> <wj-flex-grid-column [binding]="'last'" [width]="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { font-size: 120%; height: 80vh; } .wj-flexgrid .wj-cell { padding: 6px; border: none; } .wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #f0f0f0; } .fast-scroller { display: flex; flex-flow: column wrap; height: 100%; padding: 2em 0; justify-content: center; align-items: center; position: absolute; top: 0; right: 2.5em; cursor: pointer; font-size: 80%; font-weight: 800; color: navy; opacity: .5; } .fast-scroller div { text-align: center; padding: 0 3px; } body { margin-bottom: 20px; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjcCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.react.grid"; import * as wjGrid from "@grapecity/wijmo.grid"; class App extends React.Component { constructor(props) { super(props); this.data = this._getData(); this.state = { data: this.data }; } componentDidMount() { // create the fast scroller element let theScroller = document.createElement('div'); theScroller.classList.add('fast-scroller'); for (let i = 65; i <= 90; i++) { let initial = wjcCore.createElement('<div>' + String.fromCharCode(i) + '</div>'); theScroller.appendChild(initial); } this.flex.hostElement.lastElementChild.appendChild(theScroller); theScroller.addEventListener('mousedown', (e) => { // get initial we're looking for let initial = (e.target).textContent; this._scrollTo(initial); e.preventDefault(); }); // // allow scrolling by typing the initial as well this.flex.hostElement.addEventListener('keypress', (e) => { this._scrollTo(String.fromCharCode(e.keyCode)); }); } render() { return <div className="container-fluid"> <wjcGrid.FlexGrid headersVisibility="None" alternatingRowStep={0} isReadOnly={true} initialized={this.initializeGrid.bind(this)} itemsSource={this.state.data}> <wjcGrid.FlexGridColumn binding="last" width="*"></wjcGrid.FlexGridColumn> </wjcGrid.FlexGrid> </div>; } initializeGrid(flex) { this.data = this._getData(); this.flex = flex; flex.formatItem.addHandler((s, e) => { if (e.panel == s.cells && s.columns[e.col].binding == 'last') { let row = s.rows[e.row]; let item = s.rows[e.row].dataItem; e.cell.innerHTML = row instanceof wjGrid.GroupRow ? wjcCore.format('&nbsp;&nbsp;<b>{name}</b>', item) : wjcCore.format('{first} <b>{last}</b>', item); } }); } _getData() { let data = []; let first = 'Adeline,Alexander,Alice,Amelia,Andrew,Arabella,Aria,Aryan,Asher,Astrid,Audrey,Aurelia,Aurora,Austin,Ava,Axel,Benjamin,Bodhi,Caleb,Callum,Caroline,Charlotte,Chloe,Claire,Cora,Daniel,Declan,Eleanor,Eli,Elijah,Elise,Elizabeth,Ella,Eloise,Emily,Emma,Esme,Ethan,Evangeline,Ezra,Felix,Finn,Genevieve,Grace,Hazel,Henry,Imogen,Isaac,Isabella,Isla,Ivy,Jack,Jacob,James,Jane,Jasper,John,Julian,Khaleesi,Leo,Levi,Liam,Lucas,Lucy,Luke,Luna,Lydia,Maeve,Matthew,Maxwell,Maya,Mia,Mila,Miles,Milo,Nathaniel,Nora,Oliver,Olivia,Ophelia,Oscar,Penelope,Roman,Rose,Sadie,Samuel,Scarlett,Sebastian,Silas,Soren,Stella,Thea,Theodore,Thomas,Violet,William,Wyatt,Xavier,Zachary'.split(','); let last = 'Adams,Alexander,Allen,Anderson,Bailey,Baker,Barnes,Bell,Bennett,Black,Boyd,Brooks,Brown,Bryant,Burns,Butler,Campbell,Carter,Clark,Cole,Coleman,Collins,Cook,Cooper,Cox,Crawford,Cruz,Daniels,Davis,Diaz,Dixon,Edwards,Ellis,Evans,Fisher,Flores,Ford,Foster,Freeman,Garcia,Gibson,Gomez,Gonzales,Gonzalez,Gordon,Graham,Gray,Green,Griffin,Hall,Hamilton,Harris,Harrison,Hayes,Henderson,Henry,Hernandez,Hicks,Hill,Holmes,Howard,Hughes,Hunt,Hunter,Iachetta,Jackson,James,Jenkins,Johnson,Jones,Jordan,Kelly,Kennedy,King,Lee,Lewis,Long,Lopez,Marshall,Martin,Martinez,Mason,Mcdonald,Miller,Mitchell,Moore,Morales,Morgan,Morris,Murphy,Murray,Myers,Nelson,Ortiz,Owens,Parker,Patterson,Perez,Perry,Peterson,Phillips,Porter,Powell,Price,Quaid,Ramirez,Ramos,Reed,Reyes,Reynolds,Rice,Richardson,Rivera,Roberts,Robertson,Robinson,Rodriguez,Rogers,Ross,Russell,Sanchez,Sanders,Scott,Shaw,Simmons,Simpson,Smith,Stevens,Stewart,Sullivan,Taylor,Thomas,Thompson,Torres,Tucker,Turner,Udell,Valentine,Vaughan,Vickers,Walker,Wallace,Ward,Warren,Washington,Watson,Webb,Wells,West,White,Williams,Wilson,Wood,Woods,Wright,Xanders,Xavier,Young,Zabinski,Zacharias'.split(','); for (let i = 0; i < 1000; i++) { data.push({ first: first[Math.floor(Math.random() * first.length)], last: last[Math.floor(Math.random() * last.length)], }); } // group and sort it with a CollectionView let view = new wjcCore.CollectionView(data, { sortDescriptions: ['last', 'first'], groupDescriptions: [ new wjcCore.PropertyGroupDescription('last', (item, propName) => { return item[propName][0]; }) ] }); return view; } _scrollTo(initial) { if (initial.length == 1) { initial = initial.toUpperCase(); for (let i = 0; i < this.flex.rows.length; i++) { let row = this.flex.rows[i]; if (row instanceof wjGrid.GroupRow && row.dataItem.name == initial) { let rc = this.flex.cells.getCellBoundingRect(i, 0, true); let pt = this.flex.scrollPosition; wjcCore.animate((pct) => { let y = (pt.y * (1 - pct)) + (-rc.top * pct); this.flex.scrollPosition = new wjcCore.Point(pt.x, y); }, 300); break; } } } } } 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 Wijmo OLAP Pivot Chart Overview</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> .wj-flexgrid { font-size: 120%; height: 80vh; } .wj-flexgrid .wj-cell { padding: 6px; border: none; } .wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #f0f0f0; } .fast-scroller { display: flex; flex-flow: column wrap; height: 100%; padding: 2em 0; justify-content: center; align-items: center; position: absolute; top: 0; right: 2.5em; cursor: pointer; font-size: 80%; font-weight: 800; color: navy; opacity: .5; } .fast-scroller div { text-align: center; padding: 0 3px; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <wj-flex-grid headersVisibility="None" :alternatingRowStep=0 :isReadOnly=true :initialized="initializeGrid" :itemsSource="data"> <wj-flex-grid-column binding="last" width="*"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; import '@grapecity/wijmo.vue2.grid'; new Vue({ el: "#app", data: { data: null }, methods:{ initializeGrid(flex){ this.data = this._getData(); this.flex = flex; flex.formatItem.addHandler((s, e) => { if (e.panel == s.cells && s.columns[e.col].binding == 'last') { let row = s.rows[e.row]; let item = s.rows[e.row].dataItem; e.cell.innerHTML = row instanceof wjcGrid.GroupRow ? wjcCore.format('&nbsp;&nbsp;<b>{name}</b>', item) : wjcCore.format('{first} <b>{last}</b>', item); } }); }, _getData() { let data = []; let first = 'Adeline,Alexander,Alice,Amelia,Andrew,Arabella,Aria,Aryan,Asher,Astrid,Audrey,Aurelia,Aurora,Austin,Ava,Axel,Benjamin,Bodhi,Caleb,Callum,Caroline,Charlotte,Chloe,Claire,Cora,Daniel,Declan,Eleanor,Eli,Elijah,Elise,Elizabeth,Ella,Eloise,Emily,Emma,Esme,Ethan,Evangeline,Ezra,Felix,Finn,Genevieve,Grace,Hazel,Henry,Imogen,Isaac,Isabella,Isla,Ivy,Jack,Jacob,James,Jane,Jasper,John,Julian,Khaleesi,Leo,Levi,Liam,Lucas,Lucy,Luke,Luna,Lydia,Maeve,Matthew,Maxwell,Maya,Mia,Mila,Miles,Milo,Nathaniel,Nora,Oliver,Olivia,Ophelia,Oscar,Penelope,Roman,Rose,Sadie,Samuel,Scarlett,Sebastian,Silas,Soren,Stella,Thea,Theodore,Thomas,Violet,William,Wyatt,Xavier,Zachary'.split(','); let last = 'Adams,Alexander,Allen,Anderson,Bailey,Baker,Barnes,Bell,Bennett,Black,Boyd,Brooks,Brown,Bryant,Burns,Butler,Campbell,Carter,Clark,Cole,Coleman,Collins,Cook,Cooper,Cox,Crawford,Cruz,Daniels,Davis,Diaz,Dixon,Edwards,Ellis,Evans,Fisher,Flores,Ford,Foster,Freeman,Garcia,Gibson,Gomez,Gonzales,Gonzalez,Gordon,Graham,Gray,Green,Griffin,Hall,Hamilton,Harris,Harrison,Hayes,Henderson,Henry,Hernandez,Hicks,Hill,Holmes,Howard,Hughes,Hunt,Hunter,Iachetta,Jackson,James,Jenkins,Johnson,Jones,Jordan,Kelly,Kennedy,King,Lee,Lewis,Long,Lopez,Marshall,Martin,Martinez,Mason,Mcdonald,Miller,Mitchell,Moore,Morales,Morgan,Morris,Murphy,Murray,Myers,Nelson,Ortiz,Owens,Parker,Patterson,Perez,Perry,Peterson,Phillips,Porter,Powell,Price,Quaid,Ramirez,Ramos,Reed,Reyes,Reynolds,Rice,Richardson,Rivera,Roberts,Robertson,Robinson,Rodriguez,Rogers,Ross,Russell,Sanchez,Sanders,Scott,Shaw,Simmons,Simpson,Smith,Stevens,Stewart,Sullivan,Taylor,Thomas,Thompson,Torres,Tucker,Turner,Udell,Valentine,Vaughan,Vickers,Walker,Wallace,Ward,Warren,Washington,Watson,Webb,Wells,West,White,Williams,Wilson,Wood,Woods,Wright,Xanders,Xavier,Young,Zabinski,Zacharias'.split(','); for (let i = 0; i < 1000; i++) { data.push({ first: first[Math.floor(Math.random() * first.length)], last: last[Math.floor(Math.random() * last.length)], }); } // group and sort it with a CollectionView let view = new wjcCore.CollectionView(data, { sortDescriptions: ['last', 'first'], groupDescriptions: [ // group by last name's initial new wjcCore.PropertyGroupDescription('last', (item, propName) => { return item[propName][0]; }) ] }); return view; }, _scrollTo(initial) { if (initial.length == 1) { initial = initial.toUpperCase(); for (let i = 0; i < this.flex.rows.length; i++) { let row = this.flex.rows[i]; if (row instanceof wjcGrid.GroupRow && row.dataItem.name == initial) { let rc = this.flex.cells.getCellBoundingRect(i, 0, true); let pt = this.flex.scrollPosition; wjcCore.animate((pct) => { let y = (pt.y * (1 - pct)) + (-rc.top * pct); this.flex.scrollPosition = new wjcCore.Point(pt.x, y); }, 300); break; } } } } }, mounted: function(){ // create the fast scroller element let theScroller = document.createElement('div'); theScroller.classList.add('fast-scroller'); for (let i = 65; i <= 90; i++) { let initial = wjcCore.createElement('<div>' + String.fromCharCode(i) + '</div>'); theScroller.appendChild(initial); } this.flex.hostElement.lastElementChild.appendChild(theScroller); theScroller.addEventListener('mousedown', (e) => { // get initial we're looking for let initial = (e.target).textContent; this._scrollTo(initial); e.preventDefault(); }); // // allow scrolling by typing the initial as well this.flex.hostElement.addEventListener('keypress', (e) => { this._scrollTo(String.fromCharCode(e.keyCode)); }); } }); </script> <style> .wj-flexgrid { font-size: 120%; height: 80vh; } .wj-flexgrid .wj-cell { padding: 6px; border: none; } .wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) { background-color: #f0f0f0; } .fast-scroller { display: flex; flex-flow: column wrap; height: 100%; padding: 2em 0; justify-content: center; align-items: center; position: absolute; top: 0; right: 2.5em; cursor: pointer; font-size: 80%; font-weight: 800; color: navy; opacity: .5; } .fast-scroller div { text-align: center; padding: 0 3px; } body { margin-bottom: 20px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Fast Scroller</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>