No Scrollbars

The FlexGrid shows scrollbars automatically, when the width or height of the grid content exceed the grid's visible dimensions.If you want to remove the scrollbars and keep the grid scrollable, you can use CSS to set the overflow property of the grid's root element to 'hidden'.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); var data = []; for (var i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // show the data in a grid var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data }); // // support scrolling with the wheel theGrid.hostElement.addEventListener('wheel', function (e) { let root = theGrid.hostElement.querySelector('[wj-part="root"]'); if (root) { root.scrollTop += 32 * (e.deltaY < 0 ? -1 : +1); e.preventDefault(); } }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid No Scrollbars</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" class="no-scrollbars"></div> </div> </body> </html> .wj-flexgrid { max-height: 250px; } .no-scrollbars.wj-flexgrid [wj-part=root] { overflow: hidden !important; } 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 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; ngOnInit() { // support scrolling with the wheel this.flex.hostElement.addEventListener('wheel', (e) => { let root = this.flex.hostElement.querySelector('[wj-part="root"]'); if (root) { root.scrollTop += 32 * (e.deltaY < 0 ? -1 : +1); e.preventDefault(); } }); } private _getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); let data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } 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 No Scrollbars</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 class="no-scrollbars" [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { max-height: 250px; } .no-scrollbars.wj-flexgrid [wj-part=root] { overflow: hidden !important; } <template> <div class="container-fluid"> <wj-flex-grid class="no-scrollbars" :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; this.flex.hostElement.addEventListener('wheel', (e) => { let root = this.flex.hostElement.querySelector('[wj-part="root"]'); if (root) { root.scrollTop += 32 * (e.deltaY < 0 ? -1 : +1); e.preventDefault(); } }); }, _getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); let data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } }); </script> <style> .wj-flexgrid { max-height: 250px; } .no-scrollbars.wj-flexgrid [wj-part=root] { overflow: hidden !important; } </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 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"> <wjcGrid.FlexGrid className="no-scrollbars" itemsSource={this.state.data} initialized={this.initializeGrid.bind(this)}> </wjcGrid.FlexGrid> </div>; } initializeGrid(flex) { this.flex = flex; this.flex.hostElement.addEventListener('wheel', (e) => { let root = this.flex.hostElement.querySelector('[wj-part="root"]'); if (root) { root.scrollTop += 32 * (e.deltaY < 0 ? -1 : +1); e.preventDefault(); } }); } _getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','); let data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } 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: 250px; } .no-scrollbars.wj-flexgrid [wj-part=root] { overflow: hidden !important; }