Selection and Focus

You can use the 'wj-state-focused' pseudo-class to improve accessibility on your FlexGrid controls. For example, the grid below shows the selection in grey when it does not contain the focus, and adds an orange outline to the selected cell when the grid does have the focus.

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(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // show data in a grid var theGrid = new wjGrid.FlexGrid('#theGrid', { alternatingRowStep: 0, itemsSource: data }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Selection And Focus</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 { margin:10px; } body { margin-bottom: 12px; } /* de-emphasize selected cells when the grid doesn't contain the focus */ .wj-flexgrid:not(.wj-state-focused) .wj-state-selected, .wj-flexgrid:not(.wj-state-focused) .wj-state-multi-selected { background: #ddd; color: black; } .wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected { border: 2px solid orange; transition: all 100ms; } 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 { 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(); } private _getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), 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 Selection And Focus</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"> <!-- the grid --> <wj-flex-grid #flex [alternatingRowStep]="0" [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { margin:10px; } body { margin-bottom: 12px; } /* de-emphasize selected cells when the grid doesn't contain the focus */ .wj-flexgrid:not(.wj-state-focused) .wj-state-selected, .wj-flexgrid:not(.wj-state-focused) .wj-state-multi-selected { background: #ddd; color: black; } .wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected { border: 2px solid orange; transition: all 100ms; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :alternatingRowStep="0" :itemsSource="data"> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.grid'; let App = Vue.extend({ name: 'app', data: function(){ return { data: this._getData() } }, methods: { _getData: function() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .wj-flexgrid { margin:10px; } body { margin-bottom: 12px; } /* de-emphasize selected cells when the grid doesn't contain the focus */ .wj-flexgrid:not(.wj-state-focused) .wj-cell.wj-state-selected, .wj-flexgrid:not(.wj-state-focused) .wj-cell.wj-state-multi-selected { background: #ddd; color: black; } .wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected { border: 2px solid orange; transition: all 100ms; } </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 showAlternatingRows={false} itemsSource={this.state.data}> </wjcGrid.FlexGrid> </div>; } _getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), 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 { margin: 10px; } body { margin-bottom: 12px; } /* de-emphasize selected cells when the grid doesn't contain the focus */ .wj-flexgrid:not(.wj-state-focused) .wj-state-selected, .wj-flexgrid:not(.wj-state-focused) .wj-state-multi-selected { background: #ddd; color: black; } .wj-flexgrid.wj-state-focused .wj-cell.wj-state-selected { border: 2px solid orange; transition: all 100ms; }