3.3.6 - Row Headers

Each row in the graphics area can display its own header, which will be displayed on the left-hand side of the row. The header always stays in this place and does not scroll when the visible time range changes (e.g. when the user scrolls left or right).

Here we are granted informations about stock pricing and daily volume with the blue background row header.

To activate the default RowHeader in this graphic we just have to call the two following methods:

const graphics = this.gantt.getGraphics();
graphics.setShowRowHeaders(true);
graphics.setRowHeadersWidth(100);

The default row header that ships with ScheduleJS knows how to display scales when the application uses chart layouts. The implementation of the default header can be found in the ScaleRowHeader class.

Custom row headers can be created by subclassing RowHeader.

To create a customized RowHeader you could build a new one using the following approach:

import {ScaleRowHeader, Color} from "schedule";

import {SymbolRow} from "./symbol-row.model"; // The Activity class used in this graphics.

export class MyRowHeader extends ScaleRowHeader<SymbolRow> {
  
  constructor(graphics) {
    super(graphics);
    this.setBackgroundFill(Color.FORESTGREEN.withOpacity(0.5)); // Change background color.
  }

}

To register this new RowHeader, use the following method:

graphics.setRowHeaderFactory((graphics) => new MyRowHeader(graphics));