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

Background

Wijmo FlexSheet displays gridlines by rendering borders around its cells. In Angular, you can toggle these gridlines dynamically by getting a reference to the FlexSheet control and adding or removing a custom CSS class from the control’s host element.

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.angular2.grid.sheet @mescius/wijmo.styles

import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as wijmo from '@mescius/wijmo';
import * as wjcSheet from '@mescius/wijmo.grid.sheet';
import { WjGridSheetModule } from '@mescius/wijmo.angular2.grid.sheet';

• The WjGridSheetModule package provides the Angular FlexSheet components, while the core Wijmo package provides helper methods such as toggleClass and hasClass.

Create the FlexSheet data source

data = this.getData(20);

private getData(count: number) {
  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 data array is later bound to the sheet through the itemsSource property.

Add the FlexSheet markup

<wj-flex-sheet
  #flex
  [showFilterIcons]="false"
  (initialized)="initializeFlexSheet(flex)">
  <wj-sheet [name]="'Sheet 1'" [itemsSource]="data"></wj-sheet>
</wj-flex-sheet>

<br />
<br />

<button type="button" (click)="toggleGridLines()">
  Show/Hide Grid
</button>

• The wj-flex-sheet component creates the FlexSheet control. The wj-sheet component binds the data source to a sheet named Sheet 1. Setting [showFilterIcons]="false" hides the filter icons.

Store the FlexSheet instance

private flexSheet: wjcSheet.FlexSheet | null = null;

initializeFlexSheet(flex: wjcSheet.FlexSheet) {
  this.flexSheet = flex;
}

• The initialized event passes the FlexSheet control instance to the component. Storing it lets you access the FlexSheet later from button click handlers or other component methods.

Toggle the gridline CSS class

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

• This method gets the FlexSheet host element and toggles the no-grid CSS class. When the class is added, 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 the cell borders when the no-grid class is applied to the FlexSheet host element.

With this Angular setup, we created a FlexSheet with a bound data source, stored the initialized FlexSheet instance, hid the filter icons, and added a button that dynamically toggles a CSS class to show or hide the gridlines.

Happy coding!