How to Toggle FlexSheet Gridlines and Hide the Filter Icon in JavaScript

Background

Wijmo FlexSheet displays gridlines through cell borders. In JavaScript, you can create the FlexSheet control, store the returned control instance, and toggle a custom CSS class on its host element to show or hide the gridlines dynamically.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Create the FlexSheet data source.
3. Add the FlexSheet markup.
4. Store the FlexSheet instance.
5. Toggle the gridline CSS class.
6. Add CSS to hide the gridlines.

Getting Started

Install and import the required Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.grid.sheet @mescius/wijmo.styles

import '@mescius/wijmo.styles/wijmo.css';
import * as wijmo from '@mescius/wijmo';
import * as wjFlexSheet from '@mescius/wijmo.grid.sheet';

import './styles.css';

• This imports the Wijmo stylesheet, the Wijmo core utilities, and the FlexSheet control.

Create the FlexSheet data source

function getData(count) {
  const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  const data = [];

  for (let i = 0; i < count; i++) {
    const condition = Boolean(Math.floor(Math.random() + 0.5));

    data.push({
      id: i,
      country: countries[i % countries.length],
      downloads: Math.random() * 100000,
      mixed: condition
        ? ''
        : countries[Math.floor(Math.random() * countries.length)],
      checked: condition
    });
  }

  return data;
}

• This creates sample data that will be displayed in the FlexSheet. The returned array is later passed to a bound sheet.

Add the FlexSheet markup

<div id="flexSheet"></div>

<br />
<br />

<button id="toggleGridLines" type="button">
  Show/Hide Grid
</button>

• The div element hosts the FlexSheet control. The button calls the JavaScript logic that toggles the gridlines.

Store the FlexSheet instance

let flexSheet = null;

function init() {
  const source = getData(20);

  flexSheet = new wjFlexSheet.FlexSheet('#flexSheet', {
    showFilterIcons: false
  });

  flexSheet.addBoundSheet('Sheet 1', source);
}

• The FlexSheet constructor creates the control and returns the control instance. Storing it in flexSheet lets you access the control later. The showFilterIcons: false option hides the filter icons.

Toggle the gridline CSS class

function toggleGridLines() {
  if (!flexSheet) {
    return;
  }

  const host = flexSheet.hostElement;
  wijmo.toggleClass(host, 'no-grid', !wijmo.hasClass(host, 'no-grid'));
}

• This gets the FlexSheet host element and toggles the no-grid CSS class. When the class is present, gridlines are hidden; when it is removed, gridlines are shown again.

Add CSS to hide the gridlines

.wj-flexsheet {
  height: 500px;
}

.no-grid.wj-flexsheet .wj-cells .wj-cell {
  border: none;
}

• The first rule gives the FlexSheet a visible height. The second rule removes cell borders when the no-grid class is applied.

With this JavaScript setup, we created a FlexSheet with a bound data source, hid the filter icons, stored the FlexSheet instance, and added a button that dynamically toggles the gridlines on and off.

Happy coding!