addLinkLayer

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

func

function|object

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;
    });
});

• The argument function takes a link's object as a parameter and must return a DOM element that will be displayed in the layer.
• The argument can also be an object. In this case, it can have the following properties:
  • render - (function) a function that answers for rendering the layer's elements (mandatory)
  • container - (HTMLElement) a layer's container (optional)
  • topmost - (boolean) if true, the element will be displayed over the link (optional)
  • filter - (function) a function that takes a link object as a parameter. If returns 'false', the 'render' function won't be called for a link (optional)
• 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.

Related sample:  Gantt. Additional layer with link types

Back to top