Link Customization

You can customize the following link properties;

• type ("FinishToStart" | "FinishToFinish", "StartToStart", "StartToFinish")
• line width
• color
• line style ("dotted", "solid", etc.)
• CSS class

If you want to define the link appearance using a custom CSS class you can use the following template (styles from the default CSS theme):

.gantt_default_link_horizontal { border-bottom-style: solid; border-bottom-color: red; }

.gantt_default_link_vertical { border-right-style: solid; border-right-color: red; }

.gantt_default_link_arrow_right:before { content: ''; border-width: 6px; border-color: transparent transparent transparent red; border-style: solid; width: 0px; height:0px; position: absolute; }

.gantt_default_link_arrow_left:before { content: ''; border-width: 6px; border-color: transparent red transparent transparent; border-style: solid; width: 0px; height:0px; position: absolute; }

.gantt_default_link_arrow_down:before { content: ''; border-width: 6px; border-color: red transparent transparent transparent; border-style: solid; width: 0px; height:0px; position: absolute; 

Note: If you specify custom link color the link will be rendered using inline styles (the link CSS classes will not be applied).

JavaScript

Use the link properties to set the custom properties.

<div id="gantt"></div>

<script type="text/javascript">
var dp = new DayPilot.Gantt("gantt");
// ...
dp.links.list = [
  {
    id: "link1",
    from: "task1",
    to: "task2,
    width: 2,
    color: "blue",
    style: "solid",
    type: "FinishToStart"
  },
  {
    id: "link2",
    from: "task2",
    to: "task3,
    width: 2,
    color: "red",
    style: "dotted",
    type: "FinishToStart"
  }
];
dp.init();
</script>

void DayPilotGantt1_BeforeLinkRender(object sender, BeforeLinkRenderEventArgs e)
{
  e.Color = "blue";
  e.Style = LinkStyle.Dotted;
  e.CssClass = "mylink";
}