Row Header Customization

The resource (row) headers can be customized using onBeforeRowHeaderRender event handler. This event is called once for every row (even when the rows are generated in Gantt or Timesheet mode).

It is possible to change the HTML, configure active areas, and set custom properties such as CSS class, background color, etc.

JavaScript Scheduler

The JavaScript Scheduler supports two row rendering event handlers.

onBeforeResHeaderRender

• the original event, it is fired when .resources are transformed into rows
• it lets you configure row properties (such as eventHeight), but you can't reach real row data (events) here
• it is fired once for every row during init/update
• API: DayPilot.Scheduler.onBeforeResHeaderRender.

onBeforeRowHeaderRender

• a special event that is fired in real time whenever the row header is actually rendered
• can be fired repeatedly as the row headers are rendered progressively (and removed if you scroll them out of the viewport)
• you can access row event data here

onBeforeResHeaderRender Example

dp.onBeforeResHeaderRender = function(args) {
  if (args.resource.loaded === false) {
    args.resource.html += " (loaded dynamically)";
    args.resource.backColor = "gray";
  }
};

Styling Row Headers using Custom CSS

You can apply custom CSS class to selected rows using onBeforeRowHeaderRender event handler.

CSS

<style>
  .row1 {
      color: white;
      background: red;
  }
</style>

JavaScript

dp.onBeforeRowHeaderRender = function(args) {
  args.row.cssClass = "row1";
};

Adding a Color Bar using Active Areas

Global CSS to make space for the bar (when row header width auto-fit is enabled):

<style>
    .scheduler_default_rowheader_inner
    {
        padding-right: 10px;
    }
</style>

Adding a bar using row header active areas:

dp.onBeforeRowHeaderRender = function(args) {
  var color = (args.row.index % 2) ? "#cc4125" : "#e69138";   // alternating colors
  args.row.areas = [
      { right: 2, top: 2, bottom: 2, width: 6, backColor: color }
  ];
};

When using row header columns, it's necessary to add the area to the column object:

dp.rowHeaderColumns = [
  { text: "Name", display: "name" },
  { text: "Capacity", display: "capacity" }
];
dp.onBeforeRowHeaderRender = function(args) {
  var color = (args.row.index % 2) ? "#cc4125" : "#e69138"; // alternating colors
  var last = args.row.columns.length - 1;
  args.row.columns[last].areas = [
    { right: 2, top: 2, bottom: 2, width: 6, backColor: color }
  ];
};

JavaScript Scheduler Tutorials

• JavaScript Scheduler: Using Checkboxes to Select Rows

Angular Scheduler

In the Angular Scheduler component, add a new onBeforeRowHeaderRender event handler to the config object:

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class TimesheetComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {
    rowHeaderColumns: [
      {title: "Name"},
      {title: "Details"}
    ],
    onBeforeRowHeaderRender: args => {
      args.row.columns[1].text = "Row details";
    },
  };

  // ...

}

Angular Scheduler Tutorial

• Angular Scheduler: Row Header Actions
• Angular Scheduler: Resource Management
• Angular Scheduler: Add Angular Components to Row Headers

ASP.NET WebForms

It's possible to change the following properties:

• Areas (row header active areas)
• BackgroundColor
• Columns (additional row header columns)
• CssClass
• Html
• ToolTip

Background Color Example

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  if (e.Id == "E")
  {
    e.BackgroundColor = "green";
  }
}

Custom CSS Example

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  if (e.Id == "E")
  {
    e.CssClass = "my-row";
  }
}

The custom CSS class will be applied to all row header cells (if there are multiple row header columns defined).

Custom HTML Example

You can use the e.Html property to customize the row header HTML (e.g. insert a hyperlink).

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  string encodedName = System.Web.HttpUtility.HtmlEncode(e.Name);
  e.Html = String.Format("<a href='Resource.aspx?id={0}'>{1}</a>", e.Id, encodedName);
}

ASP.NET MVC

protected override void OnBeforeResHeaderRender(BeforeResHeaderRenderArgs e)
{
  if (Id == "dps_areas")
  {
      e.Areas.Add(new Area().Width(17).Bottom(1).Right(0).Top(0).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.Value);"));
  }

  if (e.Columns.Count > 0)
  {
      e.Columns[0].Html = "10 seats";
  }
}