html5-gantt-columns.png

The Gantt chart can display multiple columns in the row header.

You can use it to display additional task data, such as duration, assigned resources, etc.

JavaScript

Use columns array to specify the columns.

The column data will be loaded from the task object automatically (see the "property"). It will search for the property in the task object and in task.tags (task.tags[property] is tried first).

You can customize the column cell HTML using BeforeRowHeaderRender.

Example

dp.columns = [
  {
      title: "Name",
      width: 50,
      property: "text"
  },
  {
      title: "Info",
      width: 50,
      property: "info"
  },
  {
      title: "Duration",
      width: 50
  }
];

var e = new DayPilot.Event({
  start: start,
  end: end,
  id: DayPilot.guid(),
  text: "Task " + i,
  tags: {
      info: "info text"
  }
});
dp.tasks.add(e);