DayPilot.Gantt.onBeforeRowHeaderRender

The onBeforeRowHeaderRender event handler fires before a row header is rendered and lets you customize row header content and appearance in the JavaScript Gantt Chart component.

Declaration

DayPilot.Gantt.onBeforeRowHeaderRender(args)

Parameters

• args.task (DayPilot.Task) - underlying row data object

• args.row.html (string) - row header HTML

• args.row.backColor (string) - row header background color

• args.row.columns (array) - row header column data; see the column object structure below

• args.row.cssClass (string) - custom CSS class

• args.row.toolTip (string) - row header tooltip

• args.row.contextMenu (DayPilot.Menu object or the variable name) - row header context menu

• args.row.areas (array) - active areas; for object structure see DayPilot.Area properties

Column object structure (args.row.columns[index]):

• areas - array of active areas

• backColor (string) - background color

• cssClass (string) - custom CSS class

• horizontalAlignment ("left" | "right" | "center")

• html (string) - row header column HTML

• text (string) - used for image export or if html is not specified

Notes

The args.row.columns property is available only when Gantt row header columns are defined. It is an array indexed from 0. If columns are defined, args.row.html is ignored; use args.row.columns[0].html instead.

As of DayPilot Pro for JavaScript 7.9 SP1, this event fires in real time whenever the row is rendered, and the following properties are not available:

• args.row.expanded

• args.row.minHeight (integer)

• args.row.marginBottom (integer)

If you need these values during rendering, define them in DayPilot.Task.data.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  columns: [
    { title: "Name", width: 120, property: "text" },
    { title: "Info", width: 100, property: "info" },
    { title: "Duration", width: 80 }
  ],
  onBeforeRowHeaderRender: (args) => {
    const duration = new DayPilot.TimeSpan(args.task.end().getTime() - args.task.start().getTime());
    const html = duration.toString("d") + "d " + duration.toString("h") + "h";
    args.row.columns[2].html = html;
  },
  // ...
});
gantt.init();

Angular

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

config: DayPilot.GanttConfig = {
  columns: [
    { title: "Name", width: 120, property: "text" },
    { title: "Info", width: 100, property: "info" },
    { title: "Duration", width: 80 }
  ],
  onBeforeRowHeaderRender: (args) => {
    const duration = new DayPilot.TimeSpan(args.task.end().getTime() - args.task.start().getTime());
    const html = duration.toString("d") + "d " + duration.toString("h") + "h";
    args.row.columns[2].html = html;
  },
  // ...
};

React

<DayPilotGantt
  columns={columns}
  onBeforeRowHeaderRender={onBeforeRowHeaderRender}
  {/* ... */}
/>

const columns = [
  { title: "Name", width: 120, property: "text" },
  { title: "Info", width: 100, property: "info" },
  { title: "Duration", width: 80 }
];

const onBeforeRowHeaderRender = (args) => {
  const duration = new DayPilot.TimeSpan(args.task.end().getTime() - args.task.start().getTime());
  const html = duration.toString("d") + "d " + duration.toString("h") + "h";
  args.row.columns[2].html = html;
};

Vue

<DayPilotGantt
  :columns="columns"
  @beforeRowHeaderRender="onBeforeRowHeaderRender"
  <!-- ... -->
/>

const columns = [
  { title: "Name", width: 120, property: "text" },
  { title: "Info", width: 100, property: "info" },
  { title: "Duration", width: 80 }
];

const onBeforeRowHeaderRender = (args) => {
  const duration = new DayPilot.TimeSpan(args.task.end().getTime() - args.task.start().getTime());
  const html = duration.toString("d") + "d " + duration.toString("h") + "h";
  args.row.columns[2].html = html;
};

See Also

Row Customization [doc.daypilot.org]

DayPilot.Gantt.columns

DayPilot.Gantt.onBeforeRowHeaderExport

DayPilot.Task.data

DayPilot.Gantt Class