Demos
Grid(React)
Styling
Style API

Styling API (React)

The wijmo.grid.style module provides a FlexGridStyle class that makes it easier to style cells in FlexGrid.

The FlexGridStyle class provides toggleClass, applyStyle, removeStyle and clearAllStyles methods to allow users to add or remove styles from cell ranges.

Learn about FlexGrid | FlexGridStyle API Documentation | FlexGrid API Reference

This example uses React.

JavaScript
Angular
Vue
React
app.jsx
index.html
app.css
data.jsx
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import { FlexGrid } from '@mescius/wijmo.react.grid';
import { ComboBox } from '@mescius/wijmo.react.input';
import { CellRange, CellType } from '@mescius/wijmo.grid';
import * as wjGridStyle from "@mescius/wijmo.grid.style";
import './app.css';
import { data } from './data';
function App() {
    const [flexGridStyle, setFlexGridStyle] = useState(null);
    const styleObject1 = {
        'background-color': 'yellow',
        'font-size': '18px'
    };
    const styleObject2 = {
        'color': 'red'
    };
    const comboData = ['Inline', 'Class-based'];
    const flexRef = useRef(null);
    const comboRef = useRef(null);
    const flexInitialized = useEvent((flexgrid) => {
        flexRef.current = flexgrid;
        flexRef.current.formatItem.addHandler((s, e) => {
            if (e.panel.cellType == CellType.RowHeader)
                e.cell.innerHTML = e.row.toString();
        });
        let gridStyle = new wjGridStyle.FlexGridStyle(flexRef.current);
        setFlexGridStyle(gridStyle);
    });
    const comboInitialized = useEvent((combobox) => {
        comboRef.current = combobox;
    });
    const toggleClass = () => {
        flexGridStyle.toggleClass(flexRef.current.selection, 'myStyle1');
    };
    const toggleClassOnHeaders = () => {
        flexGridStyle.toggleClass(new CellRange(0, 0, 1, 1), 'myStyle1', flexRef.current.columnHeaders);
        flexGridStyle.toggleClass(new CellRange(0, 0, 4, 0), 'myStyle1', flexRef.current.rowHeaders);
    };
    const applyStyle = () => {
        if (comboRef.current.selectedIndex == 0)
            flexGridStyle.applyStyle(flexRef.current.selection, styleObject1);
        else
            flexGridStyle.applyStyle(flexRef.current.selection, styleObject2, flexRef.current.cells, false);
    };
    const removeStyle = () => {
        flexGridStyle.removeStyle(flexRef.current.selection, styleObject1);
        flexGridStyle.removeStyle(flexRef.current.selection, styleObject2);
    };
    const clearAllStyles = () => {
        flexGridStyle.clearAllStyles();
    };
    const clearRangeStyles = () => {
        flexGridStyle.clearAllStyles(flexRef.current.selection);
    };
    return (<div className="container-fluid">
    <div className="col-md-4">
      <div className="panel-group">
        <div className="panel panel-default">
          <div className="panel-heading">
            <h4 className="panel-title">
              Toggle Class
            </h4>
          </div>
          <div className="panel-body">
            <ul className="list-inline">
              <li>
                <button className="btn btn-default" id="applyStyle1" onClick={toggleClass}>Toggle Class on Selection</button>
              </li>
              <li>
                <button className="btn btn-default" id="applyStyle4" onClick={toggleClassOnHeaders}>Toggle Class on Headers</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div className="col-md-4">
      <div className="panel-group">
        <div className="panel panel-default">
          <div className="panel-heading">
            <h4 className="panel-title">
              Apply & Remove Styles
            </h4>
          </div>
          <div className="panel-body">
            <ul className="list-inline">
              <li>
                <ComboBox id="combo" itemsSource={comboData} initialized={comboInitialized}/>
              </li>
              <li>
                <button className="btn btn-default" id="applyStyle2" onClick={applyStyle}>Apply</button>
              </li>
              <li>
                <button className="btn btn-default" id="removeStyle2" onClick={removeStyle}>Remove</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div className="col-md-4">
      <div className="panel-group">
        <div className="panel panel-default">
          <div className="panel-heading">
            <h4 className="panel-title">
              Clear Styles
            </h4>
          </div>
          <div className="panel-body">
            <ul className="list-inline">
              <li>
                <button className="btn btn-default" id="clearAllStyles1" onClick={clearRangeStyles}>Clear all styles from selection</button>
              </li>
              <li>
                <button className="btn btn-default" id="clearAllStyles2" onClick={clearAllStyles}>Clear all styles from Grid</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <br />
    <FlexGrid initialized={flexInitialized} itemsSource={data}>
    </FlexGrid>
  </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useRef, useState } from 'react'; import useEvent from 'react-use-event-hook'; import { FlexGrid } from '@mescius/wijmo.react.grid'; import { ComboBox } from '@mescius/wijmo.react.input'; import { CellRange, CellType } from '@mescius/wijmo.grid'; import * as wjGridStyle from "@mescius/wijmo.grid.style"; import './app.css'; import { data } from './data'; function App() { const [flexGridStyle, setFlexGridStyle] = useState(null); const styleObject1 = { 'background-color': 'yellow', 'font-size': '18px' }; const styleObject2 = { 'color': 'red' }; const comboData = ['Inline', 'Class-based']; const flexRef = useRef(null); const comboRef = useRef(null); const flexInitialized = useEvent((flexgrid) => { flexRef.current = flexgrid; flexRef.current.formatItem.addHandler((s, e) => { if (e.panel.cellType == CellType.RowHeader) e.cell.innerHTML = e.row.toString(); }); let gridStyle = new wjGridStyle.FlexGridStyle(flexRef.current); setFlexGridStyle(gridStyle); }); const comboInitialized = useEvent((combobox) => { comboRef.current = combobox; }); const toggleClass = () => { flexGridStyle.toggleClass(flexRef.current.selection, 'myStyle1'); }; const toggleClassOnHeaders = () => { flexGridStyle.toggleClass(new CellRange(0, 0, 1, 1), 'myStyle1', flexRef.current.columnHeaders); flexGridStyle.toggleClass(new CellRange(0, 0, 4, 0), 'myStyle1', flexRef.current.rowHeaders); }; const applyStyle = () => { if (comboRef.current.selectedIndex == 0) flexGridStyle.applyStyle(flexRef.current.selection, styleObject1); else flexGridStyle.applyStyle(flexRef.current.selection, styleObject2, flexRef.current.cells, false); }; const removeStyle = () => { flexGridStyle.removeStyle(flexRef.current.selection, styleObject1); flexGridStyle.removeStyle(flexRef.current.selection, styleObject2); }; const clearAllStyles = () => { flexGridStyle.clearAllStyles(); }; const clearRangeStyles = () => { flexGridStyle.clearAllStyles(flexRef.current.selection); }; return (<div className="container-fluid"> <div className="col-md-4"> <div className="panel-group"> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title"> Toggle Class </h4> </div> <div className="panel-body"> <ul className="list-inline"> <li> <button className="btn btn-default" id="applyStyle1" onClick={toggleClass}>Toggle Class on Selection</button> </li> <li> <button className="btn btn-default" id="applyStyle4" onClick={toggleClassOnHeaders}>Toggle Class on Headers</button> </li> </ul> </div> </div> </div> </div> <div className="col-md-4"> <div className="panel-group"> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title"> Apply & Remove Styles </h4> </div> <div className="panel-body"> <ul className="list-inline"> <li> <ComboBox id="combo" itemsSource={comboData} initialized={comboInitialized}/> </li> <li> <button className="btn btn-default" id="applyStyle2" onClick={applyStyle}>Apply</button> </li> <li> <button className="btn btn-default" id="removeStyle2" onClick={removeStyle}>Remove</button> </li> </ul> </div> </div> </div> </div> <div className="col-md-4"> <div className="panel-group"> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title"> Clear Styles </h4> </div> <div className="panel-body"> <ul className="list-inline"> <li> <button className="btn btn-default" id="clearAllStyles1" onClick={clearRangeStyles}>Clear all styles from selection</button> </li> <li> <button className="btn btn-default" id="clearAllStyles2" onClick={clearAllStyles}>Clear all styles from Grid</button> </li> </ul> </div> </div> </div> </div> <br /> <FlexGrid initialized={flexInitialized} itemsSource={data}> </FlexGrid> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Style API</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
.wj-flexgrid { height: 350px; margin: 6px 0; } .myStyle1 { background-color: antiquewhite !important; color: brown !important; } .myStyle2{ background-color: aquamarine !important; color:blue !important; }
function getData() { let countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (var i = 0; i < 50; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } export const data = getData();
(function (global) { window.process = { env: { NODE_ENV: "production" } } System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/index.js', 'react-dom': 'npm:react-dom/index.js', 'react-dom/client': 'npm:react-dom/client.js', "scheduler": "npm:scheduler/index.js", 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);