DayPilot.Gantt.onBeforeGridLineRender

The onBeforeGridLineRender event handler fires before each grid line is rendered. You can use it to hide the line or apply custom styling.

Available since version 2026.2.6925.

Declaration

DayPilot.Gantt.onBeforeGridLineRender(args)

Parameters

• args.color (string) - custom color applied using an inline style

• args.cssClass (string) - custom CSS class added to the line

• args.end (DayPilot.Date) - end of the time column for vertical lines, or the end of the time break for vertical breaks

• args.hidden (boolean) - set to true to hide the grid line

• args.row (DayPilot.Row) - Gantt chart row for horizontal lines

• args.start (DayPilot.Date) - start of the time column for vertical lines, or the start of the time break for vertical breaks

• args.type ("HorizontalLine" | "VerticalLine" | "VerticalBreak") - grid line type

Notes

There are three types of grid lines:

• "HorizontalLine" - standard horizontal line displayed below every row

• "VerticalLine" - standard vertical line displayed at the end of every time column

• "VerticalBreak" - indicator of a break in a non-continuous timeline

Examples

JavaScript

Hide vertical grid lines:

const dp = new DayPilot.Gantt("dp", {
  onBeforeGridLineRender: (args) => {
    if (args.type === "VerticalLine") {
      args.hidden = true;
    }
  },
  // ...
});
dp.init();

Hide horizontal grid lines:

const dp = new DayPilot.Gantt("dp", {
  onBeforeGridLineRender: (args) => {
    if (args.type === "HorizontalLine") {
      args.hidden = true;
    }
  },
  // ...
});
dp.init();

Add a custom CSS class to vertical lines separating days:

const dp = new DayPilot.Gantt("dp", {
  onBeforeGridLineRender: (args) => {
    if (args.type === "VerticalLine" && args.end.getTimePart() === 0) {
      args.cssClass = "midnight-line";
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.GanttConfig = {
  onBeforeGridLineRender: (args) => {
    if (args.type === "VerticalLine") {
      args.hidden = true;
    }
  },
  // ...
};

React

<DayPilotGantt
  onBeforeGridLineRender={onBeforeGridLineRender}
  {/* ... */}
/>

const onBeforeGridLineRender = (args) => {
  if (args.type === "VerticalLine") {
    args.hidden = true;
  }
};

Vue

<DayPilotGantt
  @beforeGridLineRender="onBeforeGridLineRender"
  <!-- ... -->
/>

const onBeforeGridLineRender = (args) => {
  if (args.type === "VerticalLine") {
    args.hidden = true;
  }
};