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

Column properties (args.columns[x]):

• 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].

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
  @beforeRowHeaderExport="onBeforeRowHeaderExport"
  <!-- ... -->
/>

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

See Also

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

DayPilot.Gantt Class