Demos
Grid(Vue)
Styling
Style API

Styling API (Vue)

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 Vue.

JavaScript
Angular
Vue
React
app.vue
index.html
Copy to CodeMine
<template>
  <div class="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" @click="toggleClass">Toggle Class on Selection</button>
              </li>
              <li>
                <button className="btn btn-default" id="applyStyle4" @click="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>
                <wj-combo-box id="combo" :itemsSource="comboData" :initialized="comboInitialized">
                </wj-combo-box>
              </li>
              <li>
                <button className="btn btn-default" id="applyStyle2" @click="applyStyle">Apply</button>
              </li>
              <li>
                <button className="btn btn-default" id="removeStyle2" @click="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" @click="clearRangeStyles">Clear all styles from selection</button>
              </li>
              <li>
                <button className="btn btn-default" id="clearAllStyles2" @click="clearAllStyles">Clear all styles from Grid</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
      <br/>
      <wj-flex-grid :itemsSource="data" :initialized="flexInitialized">
      </wj-flex-grid>
  </div>
</template>

<script setup>
import * as wjcCore from "@mescius/wijmo";
import { CellRange, CellType } from "@mescius/wijmo.grid";
import * as wjGridStyle from "@mescius/wijmo.grid.style";
import { ref } from "vue";

const data = ref(_getData());
const styleObject1 = {
            'background-color': 'yellow',
            'font-size': '18px'
        };
const styleObject2 = {
            'color': 'red'
        };
const comboData = ['Inline', 'Class-based'];
const flex = ref(null);
const flexGridStyle = ref(null);
const combo = ref(null);

function flexInitialized(flexgrid) {
    flex.value = flexgrid;
    flex.value.formatItem.addHandler((s, e) => {
        if (e.panel.cellType == CellType.RowHeader) e.cell.innerHTML = e.row.toString();
    });
    flexGridStyle.value = new wjGridStyle.FlexGridStyle(flexgrid);
}

function comboInitialized(combobox) {
    combo.value = combobox;
}

function _getData() {
    // create some random data
    let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
        data = [];
    for (let 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;
}

function toggleClass() {
    flexGridStyle.value.toggleClass(flex.value.selection, "myStyle1");
}

function toggleClassOnHeaders() {
    flexGridStyle.value.toggleClass(new CellRange(0, 0, 1, 1), "myStyle1", flex.value.columnHeaders);
    flexGridStyle.value.toggleClass(new CellRange(0, 0, 4, 0), "myStyle1", flex.value.rowHeaders);
}

function applyStyle() {
    if (combo.value.selectedIndex == 0) flexGridStyle.value.applyStyle(flex.value.selection, styleObject1);
    else flexGridStyle.value.applyStyle(flex.value.selection, styleObject2, flex.value.cells, false);
}

function removeStyle() {
    flexGridStyle.value.removeStyle(flex.value.selection, styleObject1);
    flexGridStyle.value.removeStyle(flex.value.selection, styleObject2);
}

function clearAllStyles() {
    flexGridStyle.value.clearAllStyles();
}

function clearRangeStyles() {
    flexGridStyle.value.clearAllStyles(flex.value.selection);
}
</script>

<style>
.wj-flexgrid {
    height: 450px;
    margin: 6px 0;
}

.myStyle1 {
    background-color: antiquewhite !important;
    color: brown !important;
}
.myStyle2{
    background-color: aquamarine !important;
    color:blue !important;
}
</style>
<template> <div class="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" @click="toggleClass">Toggle Class on Selection</button> </li> <li> <button className="btn btn-default" id="applyStyle4" @click="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> <wj-combo-box id="combo" :itemsSource="comboData" :initialized="comboInitialized"> </wj-combo-box> </li> <li> <button className="btn btn-default" id="applyStyle2" @click="applyStyle">Apply</button> </li> <li> <button className="btn btn-default" id="removeStyle2" @click="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" @click="clearRangeStyles">Clear all styles from selection</button> </li> <li> <button className="btn btn-default" id="clearAllStyles2" @click="clearAllStyles">Clear all styles from Grid</button> </li> </ul> </div> </div> </div> </div> <br/> <wj-flex-grid :itemsSource="data" :initialized="flexInitialized"> </wj-flex-grid> </div> </template> <script setup> import * as wjcCore from "@mescius/wijmo"; import { CellRange, CellType } from "@mescius/wijmo.grid"; import * as wjGridStyle from "@mescius/wijmo.grid.style"; import { ref } from "vue"; const data = ref(_getData()); const styleObject1 = { 'background-color': 'yellow', 'font-size': '18px' }; const styleObject2 = { 'color': 'red' }; const comboData = ['Inline', 'Class-based']; const flex = ref(null); const flexGridStyle = ref(null); const combo = ref(null); function flexInitialized(flexgrid) { flex.value = flexgrid; flex.value.formatItem.addHandler((s, e) => { if (e.panel.cellType == CellType.RowHeader) e.cell.innerHTML = e.row.toString(); }); flexGridStyle.value = new wjGridStyle.FlexGridStyle(flexgrid); } function comboInitialized(combobox) { combo.value = combobox; } function _getData() { // create some random data let countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (let 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; } function toggleClass() { flexGridStyle.value.toggleClass(flex.value.selection, "myStyle1"); } function toggleClassOnHeaders() { flexGridStyle.value.toggleClass(new CellRange(0, 0, 1, 1), "myStyle1", flex.value.columnHeaders); flexGridStyle.value.toggleClass(new CellRange(0, 0, 4, 0), "myStyle1", flex.value.rowHeaders); } function applyStyle() { if (combo.value.selectedIndex == 0) flexGridStyle.value.applyStyle(flex.value.selection, styleObject1); else flexGridStyle.value.applyStyle(flex.value.selection, styleObject2, flex.value.cells, false); } function removeStyle() { flexGridStyle.value.removeStyle(flex.value.selection, styleObject1); flexGridStyle.value.removeStyle(flex.value.selection, styleObject2); } function clearAllStyles() { flexGridStyle.value.clearAllStyles(); } function clearRangeStyles() { flexGridStyle.value.clearAllStyles(flex.value.selection); } </script> <style> .wj-flexgrid { height: 450px; margin: 6px 0; } .myStyle1 { background-color: antiquewhite !important; color: brown !important; } .myStyle2{ background-color: aquamarine !important; color:blue !important; } </style>
<!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="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"> </div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@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.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.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/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.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);