The onBeforeRowHeaderRender event handler fires whenever a JavaScript Scheduler row header is rendered. If progressive row header rendering is enabled, which is the default, the handler runs during vertical scrolling as row headers enter the viewport.

Declaration

DayPilot.Scheduler.onBeforeRowHeaderRender(args)

Parameters

  • args.row (DayPilot.Row) - object representing the rendered row, with properties that can be customized

  • args.row.areas (array of DayPilot.Area) - active areas for the first row header column

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

  • args.row.columns (array) - row header column objects

  • args.row.contextMenu - row header context menu

  • args.row.cssClass (string) - CSS class applied to the row header

  • args.row.fontColor (string) - foreground color (available since 2018.2.3224)

  • args.row.horizontalAlignment ("left" | "right" | "center") - text alignment of the first column (available since 2018.1.3169)

  • args.row.html (string) - HTML used for the first column content

  • args.row.level (number) - row level

  • args.row.moveDisabled (boolean) - disables moving the row

  • args.row.text (string) - plain text used for image export or when args.row.html is not specified

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

  • args.row.verticalAlignment ("top" | "bottom" | "center") - vertical text alignment (available since 2018.3.3417)

Column properties (args.row.columns[x]):

  • areas (array of DayPilot.Area) - active areas for the column (available since 8.3.2720)

  • backColor (string) - column background color

  • cssClass (string) - CSS class applied to the column

  • horizontalAlignment ("left" | "right" | "center") - column text alignment (available since 2018.2.3223)

  • html (string) - HTML used for the column content

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

Notes

Unlike DayPilot.Scheduler.onBeforeResHeaderRender, which runs when rows are loaded from DayPilot.Scheduler.resources, this event is called when the row header is actually rendered and gives you access to real-time properties of the live DayPilot.Row object.

Do not call direct DayPilot.Row methods that modify the row inside this handler, for example args.row.column(0).html("new html").

The args.row.columns[] index mapping depends on DayPilot.Scheduler.rowHeaderColumnsMode.

Tabular mode. Since 2019.4.4063, Tabular mode is the default. When no columns are defined using DayPilot.Scheduler.rowHeaderColumns, update the single row header cell using args.row.html. When columns are defined, use args.row.columns[x].html; in that case args.row.html is ignored and the indexes correspond to the configured DayPilot.Scheduler.rowHeaderColumns.

Legacy mode. The first row header column is controlled using args.row. Additional columns defined by DayPilot.Scheduler.rowHeaderColumns are available through args.row.columns[], where the second visible column is args.row.columns[0].

See also row header customization.

Examples

JavaScript

const buildGroupAreas = (row) => {
  const hasExpanded = row.groups.expanded().length > 0;
  const hasCollapsed = row.groups.collapsed().length > 0;

  if (hasExpanded && hasCollapsed) {
    return [
      { visibility: "Visible", right: 14, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() },
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  if (hasCollapsed) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() }
    ];
  }

  if (hasExpanded) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  return [];
};

const dp = new DayPilot.Scheduler("dp", {
  onBeforeRowHeaderRender: (args) => {
    args.row.areas = buildGroupAreas(args.row);
  },
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>
const buildGroupAreas = (row) => {
  const hasExpanded = row.groups.expanded().length > 0;
  const hasCollapsed = row.groups.collapsed().length > 0;

  if (hasExpanded && hasCollapsed) {
    return [
      { visibility: "Visible", right: 14, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() },
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  if (hasCollapsed) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() }
    ];
  }

  if (hasExpanded) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  return [];
};

config: DayPilot.SchedulerConfig = {
  onBeforeRowHeaderRender: (args) => {
    args.row.areas = buildGroupAreas(args.row);
  },
  // ...
};

React

<DayPilotScheduler
  onBeforeRowHeaderRender={onBeforeRowHeaderRender}
  {/* ... */}
/>
const buildGroupAreas = (row) => {
  const hasExpanded = row.groups.expanded().length > 0;
  const hasCollapsed = row.groups.collapsed().length > 0;

  if (hasExpanded && hasCollapsed) {
    return [
      { visibility: "Visible", right: 14, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() },
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  if (hasCollapsed) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() }
    ];
  }

  if (hasExpanded) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  return [];
};

const onBeforeRowHeaderRender = (args) => {
  args.row.areas = buildGroupAreas(args.row);
};

Vue

<DayPilotScheduler
  @beforeRowHeaderRender="onBeforeRowHeaderRender"
  <!-- ... -->
/>
const buildGroupAreas = (row) => {
  const hasExpanded = row.groups.expanded().length > 0;
  const hasCollapsed = row.groups.collapsed().length > 0;

  if (hasExpanded && hasCollapsed) {
    return [
      { visibility: "Visible", right: 14, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() },
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  if (hasCollapsed) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="expand.png" alt="Expand" />', action: "JavaScript", js: row => row.groups.expandAll() }
    ];
  }

  if (hasExpanded) {
    return [
      { visibility: "Visible", right: 0, top: 0, width: 12, height: 12, style: "cursor:pointer", html: '<img src="collapse.png" alt="Collapse" />', action: "JavaScript", js: row => row.groups.collapseAll() }
    ];
  }

  return [];
};

const onBeforeRowHeaderRender = (args) => {
  args.row.areas = buildGroupAreas(args.row);
};

See Also

Row Header Customization [doc.daypilot.org]

Progressive Row Rendering [doc.daypilot.org]

DayPilot.Scheduler.onBeforeResHeaderRender

DayPilot.Scheduler.rowHeaderColumns

DayPilot.Scheduler.rowHeaderColumnsMode

Group Concurrent Events Demo

DayPilot.Scheduler Class

Availability

Availability of this API item in DayPilot editions:

ProductLitePro
DayPilot for JavaScript