Task Customization

You can customize the following task box properties:

• HTML of the main task box

• HTML displayed next to the task box (on the left, on the right)

• background color

• background image and repeat

• bubble HTML

• CSS class

• show/hide the complete bar

• complete bar color

• context Menu

You can also modify the default behavior for selected tasks:

• disable drag and drop moving

• disable drag and drop resizing

• disable clicking

• disable double-clicking

• set custom context menu

• add active areas

JavaScript

You can use these two events to customize the task behavior and appearance:

• onBeforeTaskRender (customization of the task box)

• onBeforeRowHeaderRender (customization of the row header)

See also row customization.

Example: Set Custom Background Color of the Task Box

Config:

{
  onBeforeTaskRender: (args) => {
    args.data.box.backColor = "#cc0000";
  },
  // ...
}

Example: Display Custom Text in the Task Box

Config:

{
  onBeforeTaskRender: (args) => {
    args.data.box.text = args.data.text;   // displays task text instead of percentage in the box
  },
  // ...
}

Example: Add Custom CSS to the Task Box

Config:

{
  onBeforeTaskRender: (args) => {
    args.data.box.cssClass = "my-task";
  },
  // ...
}

This way, you can override the default styling.

void DayPilotGantt1_BeforeTaskRender(object sender, BeforeTaskRenderEventArgs e)
{
  e.Box.Html = "Complete: " + e.Complete + "%";
  e.Box.HtmlRight = (string) e.DataItem["description"];
}