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;
  }
};