html5-scheduler-row-header-columns.png

The row (resource) header can display multiple columns.

  • The width of the columns can be changed using drag and drop (using the column titles).
  • The row headers with many columns can display a horizontal scrollbar.

See also

JavaScript

Since 2019.4.4060

Tabular Mode Example

<script type="text/javascript">

  var dp = new DayPilot.Scheduler("dp");

  // ...

  dp.rowHeaderColumnsMode = "Tabular";
  dp.rowHeaderColumns = [
      { text: 'Name', display: "name" },
      { text: 'Floor', display: "location" },
      { text: 'Size', display: "size" }
  ];

  dp.resources = [
      { id: "A", expanded: true, name: "Building A", children: [
              { id: "101", name: "Room 101", location: "Floor 1", size: "2 beds" },
              { id: "102", name: "Room 102", location: "Floor 1", size: "3 beds" },
              { id: "103", name: "Room 103", location: "Floor 1", size: "1 bed" },
              { id: "201", name: "Room 201", location: "Floor 2", size: "2 beds" },
          ]
      },
      { id: "B", expanded: true, name: "Building B", children: [
              { id: "301", name: "Room 301", location: "Floor 1", size: "2 beds" },
              { id: "302", name: "Room 302", location: "Floor 1", size: "3 beds" },
              { id: "303", name: "Room 303", location: "Floor 1", size: "1 bed" },
              { id: "401", name: "Room 401", location: "Floor 2", size: "2 beds" },
          ]
      },
  ];

  dp.init();

</script>

Legacy Mode Example

<div id="dp"><div>

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

  // ...
  dp.rowHeaderColumnsMode = "Legacy";

  // 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

Demo

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