How to add content into a cell ?

Hello,

based on task cell class template (docs.dhtmlx.com/gantt/api__gantt … plate.html)

gantt.templates.task_cell_class = function(item,date){ if([test]){ return "myCSS-Class"; } };
I want to add a custom content (HTML) into a cell, not juste a CSS class.
Is any way to achieve this ? (Or just get the gantt_task_cell DOM element)

Thanks for reading,
Regards.

You need to use gantt_text template
docs.dhtmlx.com/gantt/api__gantt … plate.html
docs.dhtmlx.com/gantt/desktop__t … _task.html

Hello Stanislav, thank you for your quick reply.
This is right but not exactly what I want.
(See attached pic)
I want to add the text “Meeting” on 2013-04-08, this date is out of the task limit.

There is no way to place a custom html content in some cell of the grid. You original code is the only way to alter look of grid. If you target only modern browsers, you can still use css template and create a complex css rule with :above or :before flag.

It may be used to add simple text content in the necessary place in the grid.
developer.mozilla.org/en-US/doc … SS/::after

Thanks Stanislav,

It is a good idea !
This is my implementation with dynamic CSS :

gantt.templates.task_cell_class = function (item, date) {
   // My test to display something on 7 of july
    if (date - new Date(2014, 06, 7) == 0 && item.id == 1) {
        //Content adding :
        addCSSRule(GetDynamicStylesheet(), ".Dyn_" + item.id + "::after", "content:'Hu Howw'", 0);

        return "Dyn_" + item.id;
    }

    return "";
};
//Add or replace a rule
function addCSSRule(sheet, selector, rules, index) {
    if (sheet.insertRule) {
        var theRules = sheet.cssRules;
        var ruleIndex = -1;

        for (i = 0; i < theRules.length; i++) {
            if (selector === theRules[i].selectorText)
                ruleIndex = i;
        }

        if (ruleIndex != -1) {
            sheet.deleteRule(ruleIndex);
        }

        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else {
        sheet.addRule(selector, rules, index);
    }
}

//Create a dynamic style sheet ou GET if exists
function GetDynamicStylesheet() {
    var sheets = document.styleSheets;

    var dynaminSheet = document.styleSheets['DynamicStyle'];
    if (dynaminSheet === undefined) {
        dynaminSheet = (function () {
            var style = document.createElement("style");
            style.setAttribute("id", "DynamicStyle");
            style.appendChild(document.createTextNode(""));
            document.head.appendChild(style);

            return style.sheet;
        })();
    }
    return dynaminSheet;
}

This draft code need improvements but works with IE 11 & Chrome 35.
Regards.