DayPilot.Gantt.onBeforeRowHeaderExport

The onBeforeRowHeaderExport event handler fires during image and Excel export. It lets you customize the Gantt Chart row header content and appearance in the exported image.

Available since version 2023.1.5529.

Declaration

DayPilot.Gantt.onBeforeRowHeaderExport(args)

Parameters

• args.areas (DayPilot.AreaData[]): active areas for image export

• args.task - exported task (DayPilot.Task).

• args.columns (array) - exported row header columns.

• args.text (string) - exported text.

• args.backColor (string) - background color.

• args.borderColor (string) - border color.

• args.fontSize (string) - font size.

• args.fontFamily (string) - font family.

• args.fontStyle ("normal" | "italic" | "bold") - font style.

• args.fontColor (string) - font color.

• args.horizontalAlignment ("left" | "center" | "right") - horizontal text alignment.

• args.verticalAlignment ("top" | "center" | "bottom") - vertical text alignment.

args.columns contains the exported visible row-header cells, including the first cell; it excludes column titles.

Column properties (args.columns[x]):

• areas (DayPilot.AreaData[]): active areas for this exported cell

• backColor

• fontColor

• fontFamily

• fontSize

• fontStyle

• horizontalAlignment

• verticalAlignment

• text

Notes

If the row header uses multiple columns, customize each exported column separately using args.columns[x].

Active Areas in Image Export

For PNG, JPEG and SVG export, args.areas contains copies of the active-area descriptors prepared for this item. Replace it or assign [] to change only the exported areas. The export does not call an area’s onAfterRender DOM callback. Custom HTML remains outside the supported image-export representation.

Top-level args.areas addresses the first cell, or a merged parent header. Replacing it takes precedence over args.columns[0].areas. To suppress every row-header area, clear both the top-level array and each column array.

args.areas = [];
args.columns.forEach(column => { column.areas = []; });

Examples

Uses the original row name instead of HTML:

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  onBeforeRowHeaderExport: (args) => {
    args.text = args.task.text();
  },
  // ...
});
gantt.init();

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>

config: DayPilot.GanttConfig = {
  onBeforeRowHeaderExport: args => {
    args.text = args.task.text();
  },
  // ...
};

React

<DayPilotGantt
  onBeforeRowHeaderExport={onBeforeRowHeaderExport}
/>

const onBeforeRowHeaderExport = (args) => {
  args.text = args.task.text();
};

Vue

<DayPilotGantt
  :onBeforeRowHeaderExport="onBeforeRowHeaderExport"
/>

const onBeforeRowHeaderExport = (args) => {
  args.text = args.task.text();
};

See Also

Client-Side Image Export [doc.daypilot.org]

DayPilot.Gantt Class