Scrolling and ViewRange

When the user selects a cell using the mouse or keyboard, the FlexGrid automatically ensures it is visible by calling the scrollIntoView method. The scrollIntoView method causes the grid to scroll as needed so the requested cell is within the current viewRange. The grid will scroll the minimum amount needed to show the cell, so it may become visible at the top, middle, or bottom of the view range.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjCore from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create some random data var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // // auto-generated columns var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data }); // // scroll into view document.getElementById('scrollIntoView').addEventListener('click', function () { theGrid.scrollIntoView(100, -1); }); // // set top cell document.getElementById('scrollToTop').addEventListener('click', function () { if (true) { // // get cell rect, adjust scrollPosition.y to bring it to the top var rc = theGrid.cells.getCellBoundingRect(100, 0, true); theGrid.scrollPosition = new wjCore.Point(theGrid.scrollPosition.x, -rc.top); // } else { // // simpler but less efficient (requires a timeOut) theGrid.scrollIntoView(theGrid.rows.length - 1, -1); setTimeout(function () { theGrid.scrollIntoView(100, -1); }); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Scrolling and View Range</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"> <button id="scrollIntoView" class="btn btn-default"> Scroll Row 100 Into View </button> <button id="scrollToTop" class="btn btn-default"> Set Top Cell to Row 100 </button> <div id="theGrid"> </div> </div> </body> </html> .wj-flexgrid { max-height: 200px; margin: 12px 0; } 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: any[]; constructor() { this.data = this._getData(); } @ViewChild('flex') flex: wjcGrid.FlexGrid; scrollIntoView() { this.flex.scrollIntoView(100, -1); } scrollToTop() { // get cell rect, adjust scrollPosition.y to bring it to the top let rc = this.flex.cells.getCellBoundingRect(100, 0, true); this.flex.scrollPosition = new wjcCore.Point(this.flex.scrollPosition.x, -rc.top); } private _getData() { let countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } } // @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 Scrolling and View Range</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"> <button (click)="scrollIntoView()" class="btn btn-default"> Scroll Row 100 Into View </button> <button (click)="scrollToTop()" class="btn btn-default"> Set Top Cell to Row 100 </button> <wj-flex-grid #flex [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { max-height: 200px; margin: 12px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <button @click="scrollIntoView" class="btn btn-default"> Scroll Row 100 Into View </button> <button @click="scrollToTop" class="btn btn-default"> Set Top Cell to Row 100 </button> <wj-flex-grid :itemsSource="data" :initialized="initializeGrid"> </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; }, scrollIntoView() { this.flex.scrollIntoView(100, -1); }, scrollToTop() { // get cell rect, adjust scrollPosition.y to bring it to the top let rc = this.flex.cells.getCellBoundingRect(100, 0, true); this.flex.scrollPosition = new wjcCore.Point(this.flex.scrollPosition.x, -rc.top); }, _getData() { let countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } } }); </script> <style> .wj-flexgrid { max-height: 200px; margin: 12px 0; } 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>AutoComplete</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 "@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"; class App extends React.Component { constructor(props) { super(props); this.state = { data: this._getData() }; } render() { return <div className="container-fluid"> <button onClick={this.scrollIntoView.bind(this)} className="btn btn-default"> Scroll Row 100 Into View </button> <button onClick={this.scrollToTop.bind(this)} className="btn btn-default"> Set Top Cell to Row 100 </button> <wjcGrid.FlexGrid itemsSource={this.state.data} initialized={this.initializeGrid.bind(this)}> </wjcGrid.FlexGrid> </div>; } initializeGrid(flex) { this.flex = flex; } scrollIntoView() { this.flex.scrollIntoView(100, -1); } scrollToTop() { // get cell rect, adjust scrollPosition.y to bring it to the top let rc = this.flex.cells.getCellBoundingRect(100, 0, true); this.flex.scrollPosition = new wjcCore.Point(this.flex.scrollPosition.x, -rc.top); } _getData() { let countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } 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 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 { max-height: 200px; margin: 12px 0; } body { margin-bottom: 20px; }