The onBeforeRowHeaderRender event is fired whenever a Scheduler row header is actually rendered. If progressive row header rendering is enabled (it is enabled by default) it will happen during vertical scrolling.
Unlike onBeforeResHeaderRender (which is fired when rows are loaded from DayPilot.Scheduler.resources) this event has access to real-time row properties using DayPilot.Row object (available as args.row
).
Note: Do not use the direct row modification methods of the args.row
object inside onBeforeRowHeaderRender
[e.g. args.row.column(0).html("new html")
].
See also row header customization.
DayPilot.Scheduler.onBeforeRowHeaderRender(args)
args.row (DayPilot.Row) object with additional properties (listed below)
args.row.areas - array of active areas
args.row.backColor
args.row.columns
args.row.columns[x].areas - array of active areas (since 8.3.2720)
args.row.columns[x].backColor
args.row.columns[x].cssClass
args.row.columns[x].horizontalAlignment ("left" | "right" | "center") - since 2018.2.3223
args.row.columns[x].html - used for content
args.row.columns[x].text - used for image export or if html is not specified
args.row.contextMenu
args.row.cssClass
args.row.fontColor (since 2018.2.3224)
args.row.horizontalAlignment ("left" | "right" | "center") - since 2018.1.3169
args.row.html
args.row.level
args.row.text - used for image export or if html is not specified
args.row.moveDisabled
args.row.verticalAlignment ("top" | "bottom" | "center") - since 2018.3.3417
args.row.toolTip
The column index counting (args.resource.columns[]
) depends on rowHeaderColumnsMode ("Tabular"
or "Legacy"
) - see below.
Since version 2019.4.4063, the Scheduler uses Tabular mode for the row header columns by default.
When no columns are defined using rowHeaderColumns, the HTML of the row header (there is only one column) can be set using args.row.html
.
When columns are defined, the HTML of the row header can only be set using args.row.columns[].html
. The column numbers correspond to the columns defined using rowHeaderColumns property. The value of args.row.html
is ignored in this case (you need to use args.row.columns[0].html
instead).
Properties of the first (default) column are controlled using args.row. The HTML of the first column is always defined using args.row.html
.
Additional columns (which area available only if columns are specified using rowHeaderColumns) are acessible using args.row.columns[]
array. That means the second column is accessible as args.row.columns[0]
.
dp.onBeforeRowHeaderRender = function(args) {
var hasExpanded = args.row.groups.expanded().length > 0;
var hasCollapsed = args.row.groups.collapsed().length > 0;
if (hasExpanded && hasCollapsed) {
args.row.areas = [
{v:"Visible", right: 14, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="expand.png" />", action:"JavaScript", js: function(row) { row.groups.expandAll(); } },
{v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="collapse.png" />", action:"JavaScript", js: function(row) { row.groups.collapseAll(); } }
];
}
else if (hasCollapsed) {
args.row.areas = [
{v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="expand.png" />", action:"JavaScript", js: function(row) { row.groups.expandAll(); } },
];
}
else if (hasExpanded) {
args.row.areas = [
{v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="collapse.png" />", action:"JavaScript", js: function(row) { row.groups.collapseAll(); } }
];
}
};