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