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.
DayPilotDayPilot.Scheduler.onBeforeRowHeaderRender(args)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
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.
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);
};Row Header Customization [doc.daypilot.org]
Progressive Row Rendering [doc.daypilot.org]
DayPilot.Scheduler.onBeforeResHeaderRender
DayPilot.Scheduler.rowHeaderColumns