javascript scheduler row header columns

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

Tabular Mode

javascript html5 scheduler row header columns tabular

Since version 2019.4.4073, the Scheduler uses a new tabular mode for loading the content of the row header columns. 

The tabular mode lets you specify the source of the column data using display property of the rowHeaderColumns items:

dp.rowHeaderColumns = [
  { text: 'Name', display: "name" },
  { text: 'Floor', display: "location" },
  { text: 'Size', display: "size" }
];
dp.resources = [
  { 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" },
];

In order to avoid conflicts with the builtin resource item properties (such as areas, children, cssClass, backColor, expanded...) you can move the custom properties to a tags object. When loading the column data, the tags object will be checked first.

dp.rowHeaderColumns = [
  { text: 'Name', display: "name" },
  { text: 'Floor', display: "location" },
  { text: 'Size', display: "size" }
];
dp.resources = [
  { id: "101", tags: { name: "Room 101", location: "Floor 1", size: "2 beds" } },
  { id: "102", tags: { name: "Room 102", location: "Floor 1", size: "3 beds" } },
  { id: "103", tags: { name: "Room 103", location: "Floor 1", size: "1 bed" } },
  { id: "201", tags: { name: "Room 201", location: "Floor 2", size: "2 beds" } },
];

In the tabular mode, it's possible to enable the built-in support for row sorting.

Legacy Mode

javascript html5 scheduler row header columns legacy

In the legacy mode, the content of the first column is set by the name property of the resource. The content of the additional columns is set by columns[x].html property of the resource.

You can enable the legacy mode using rowHeaderColumnsMode property.

<div id="dp"><div>

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

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

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

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

Tutorials

ASP.NET WebForms

scheduler for asp.net webforms row header columns

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

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