addLinkLayer

displays an additional layer with custom elements for a link in the timeline area

string addLinkLayer(LinkLayerRender | LinkLayerConfig func);

func

LinkLayerRender | LinkLayerConfig

a render function or a config object

string

a DOM element that will be displayed in the layer

Available only in PRO Edition

Example

gantt.attachEvent("onGanttReady", function () {
    const link_types = ["FS", "SS", "FF", "SF"]
    gantt.addLinkLayer(function (link) {
        const node = gantt.getLinkNode(link.id);
        if (node){
            const el = document.createElement('div');
            el.className = 'link_layer';
            el.style.left = (node.childNodes[2].offsetLeft + 20) + 'px'
            el.style.top = (node.childNodes[2].offsetTop - 6) + 'px'
            el.innerHTML = link_types[link.type];
            return el;
        }
        return false;
    });
});

Details

This functionality is available in the PRO edition only.

The argument can have these types:

linkLayerRender (link, timeline, config, viewport): HTMLElement|boolean|void- a function takes a link's object as a parameter and must return a DOM element that will be displayed in the layer.
- link - (Link) - the link object
- timeline? - (any) - optional, the timeline view
- config? - (GanttConfigOptions) - optional, the Gantt configuration object
- viewport? - (LayerViewport) - optional, the viewport object
linkLayerConfig - (object) - the configuration object for the additional link layer. Has the following properties:
- id? - (string | number) - optional, the layer ID
- renderer - (object) - mandatory, a function that answers for rendering the layer's elements
  - render - (LinkLayerRender) - the function that returns HTML element that should be rendered
  - update? - (Function): void - optional, a function where you can update the rendered HTML elements
    - link - (Link) - the link object
    - node - (HTMLElement) - the container of the rendered node
    - timeline? - (any) - optional, the timeline view
    - config? - (GanttConfigOptions) - optional, the Gantt configuration object
    - viewport? - (LayerViewport) - optional, the viewport object
  - onrender? - (Function): void - optional, this function is called after rendering is complete. You can use it to render native components (for example, using the ReactDOM.render method)
    - link - (Link) - the link object
    - node - (HTMLElement) - the container of the rendered node
    - view? - (any) - optional, the layout cell where the layer is added (timeline, by default)
  - getRectangle? - (Function): { left: number, top: number, height: number, width: number } | void - optional, a function that returns the coordinates of the viewport rectangle
    - link - (Link) - the link object
    - view? - (any) - optional, the layout cell where the layer is added (timeline, by default)
    - config? - (GanttConfigOptions) - optional, the Gantt configuration object
    - gantt? - (GanttStatic) - optional, the Gantt object
  - getVisibleRange - (Function): {start: number, end: number} | undefined | void - a function that returns the object with of the visible range
    - gantt? - (GanttStatic) - optional, the Gantt object
    - view? - (any) - optional, the layout cell where the layer is added (timeline, by default)
    - config? - (GanttConfigOptions) - optional, the Gantt configuration object
    - datastore? - (any) - optional, the link datastore object
    - viewport? - (LayerViewport) - optional, the viewport object
- container? - (HTMLElement) - optional, the layer's container
- topmost? - (boolean) - optional, if true, the element will be displayed over the link
- filter? - (Function): boolean - optional, a function that takes a link object as a parameter. If returns 'false', the 'renderer' function won't be called for a link
  - link - (Link) - the link object
Beware, custom layers will be reset after the next call of gantt.init
Calling the gantt.resetLayout() method will also reset custom layers. In order for custom layers to be displayed on a page, you need to redefine the gantt.addLinkLayer method after calling resetLayout.