Columns

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

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

JavaScript

Use the columns array to specify row header columns.

The column data will be loaded from the task object automatically (see 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 onBeforeRowHeaderRender.

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 1",
  tags: {
      info: "info text"
  }
});
dp.tasks.add(e);