The resource (row) headers can be customized using BeforeResHeaderRender 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.

ASP.NET WebForms

It's possible to change the following properties:

Example

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

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";
  }
}

JavaScript

The JavaScript version 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
  • the name should be more a "onRowLoad"
  • 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";
  }
};