The row (resource) header can display multiple columns.

See also Row header width auto-fit.

ASP.NET WebForms

scheduler-for-asp.net-webforms-row-header-columns.png

Create the columns

<DayPilot:DayPilotScheduler ID="DayPilotScheduler1" runat="server" 
    ...
    >
    <HeaderColumns>
        <DayPilot:RowHeaderColumn Width="100" Title="Room" />
        <DayPilot:RowHeaderColumn Width="60" Title="Color" />
        <DayPilot:RowHeaderColumn Width="40" Title="Size" />
    </HeaderColumns>

Fill the column data

Declarative way (.aspx):

<DayPilot:Resource Name="Room A" Value="A" Expanded="True">
  <Columns>
    <DayPilot:ResourceColumn InnerHTML="Gray" />
    <DayPilot:ResourceColumn InnerHTML="25 people" />
  </Columns></DayPilot:Resource>

Programmatic way (.aspx.cs):

DayPilotScheduler1.Resources[0].Columns.Add(new ResourceColumn("Gray"));
DayPilotScheduler1.Resources[0].Columns.Add(new ResourceColumn("25 people"));

Fill the column data (unknown rows)

This methods is useful for Gantt and Timesheet modes where the rows are not created from the Resources collection.

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, BeforeResHeaderRenderEventArgs e)
{
  e.Columns[0].Html = "Blue";
  e.Columns[1].Html = "25 People";
}

Demo

ASP.NET MVC

asp.net-mvc-scheduler-row-header-columns.png

Create the columns

@Html.DayPilotScheduler("dps_rowheadercolumns", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  HeaderColumns = new RowHeaderColumnCollection
  {
    new RowHeaderColumn("Name", 50),
    new RowHeaderColumn("Seats", 50)
  },
  ...
})

Fill the column data

The content of the additional columns can be changed using Resource.Columns collection:

class Dps : DayPilotScheduler
{
  protected override void OnInit(InitArgs ea)
  {
    Resource r = new Resource("Room A", "A");
    r.Columns.Add(new ResourceColumn("Col A"));
    r.Columns.Add(new ResourceColumn("Col B"));
    Resources.Add(r);

    UpdateWithMessage("Initialized.", CallBackUpdateType.Full);
  }
}

Fill the column data (unknown rows)

This methods is useful for Gantt and Timesheet modes where the rows are not created from the Resources collection.

protected override void OnBeforeResHeaderRender(BeforeResHeaderRenderArgs e)
{
  e.Columns[0].Html = "10 seats";
}

Demo

JavaScript

javascript-scheduler-resource-columns.png

Example

<div id="dp"><div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");

  // ...

  // define columns
  dp.rowHeaderColumns = [
      { title: 'Name', width: 100 },
      { title: 'Floor', width: 100 },
      { title: 'Type', width: 100 }
  ];    

  // define resource with additional column data
  dp.resources = [
    { name: "Room 101", id: "101", columns: [{html: "Floor 1"},  {html: "2 beds"}] },
    { name: "Room 102", id: "102", columns: [{html: "Floor 1"},  {html: "3 beds"}] },
    { name: "Room 103", id: "103", columns: [{html: "Floor 1"},  {html: "1 bed"}] },
    { name: "Room 201", id: "201", columns: [{html: "Floor 2"},  {html: "2 beds"}] }
  ];
  dp.init();
</script>    

See also DayPilot.Scheduler.onBeforeResHeaderRender.

Demo