DayPilot.Scheduler.onBeforeRowHeaderRender

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.

Declaration

DayPilot.Scheduler.onBeforeRowHeaderRender(args)

Parameters

• 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.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.

Tabular mode

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).

Legacy mode

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].

Example

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(); } }
      ];
  }
};

Demo

• http://javascript.daypilot.org/demo/scheduler/groupconcurrent.html