DayPilot.Scheduler.onBeforeRowHeaderRender

This event is fired whenever the 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).

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.moveDisabled
  • args.row.verticalAlignment ("top" | "bottom" | "center") - since 2018.3.3417
  • args.row.toolTip

Properties of the first (default) column are controlled using args.row. 

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