New Tasks Wont Display Correct Template Coloring

Gantt
#1

Hi there,

I am using templates to color my parents and children tasks. And everything works fine when you load the page, but if you add a new task - they load in the default blue and green color scheme. I have played around with OnTaskCreated, OnBeforeTaskAdd, OnAfterTaskAdd, and with onTaskIdChange, but can’t seem to figure it out. I have provided some of my code below.

**Gantt.Templates.Task_Class

// This works fine like I said when it's a loaded, but not when you create a new task using the "+" button.
   gantt.templates.task_class = function (start, end, task) {
        if (task.type == 2 && task.template == false) {
            return "ganttparent";
        }

        if (task.type == 1 && task.template == false) {
            return "ganttchild";
        }

        if (task.type == 2 && task.template == true) {
            return "templateparent";
        }

        if (task.type == 1 && task.template == true) {
            return "templatechild";
        }

        return "";
    }

**onTaskCreated

 //Add task button ****This is the little '+' button that generates the lightbox
    gantt.attachEvent("onTaskCreated",
        function (task) {
            //debugger;
            //console.log("On Task Created " + task.id);
            //task.color = 'yellow';  ** This works, but does not differentiate between parent and child
            // gantt.templates.task_class = "ganttchild";
      
            task.id = maxValueInt;
            return true;
        });

**onBeforeTaskAdd

   gantt.attachEvent("onBeforeTaskAdd", function (id, item) {
        //Parent type=2 - Children type=1. This ensures the correct value gets written to the DB
        var task = gantt.getTask(id);
        //console.log("On Before Task Add " + id);
        if (gantt.hasChild(id)) {
            task.type = 2;
            task.color = "yellow";
        } else {
            task.type = 1;
            task.color = "black";
        }

        //if (task.type === gantt.config.types.task) {
        //    gantt.templates.task_class = function (start, end, task) {
        //        return "ganttchild";
        //    };
        //}

        //if (task.type === gantt.config.types.project) {
        //    if (task.type === gantt.config.types.task) {
        //        gantt.templates.task_class = function (start, end, task) {
        //            return "ganttparent";
        //        };
        //    }
        //}

        return true;
    });

**onAfterTaskAdd

   //This is after you click the 'save' button on a new task.
    // API Docs http://docs.dhtmlx.com/gantt/api__gantt_onaftertaskadd_event.html
    gantt.attachEvent("onAfterTaskAdd",
        function (id, task) {
            //   debugger;
            //console.log("On After Task Add " + id);
            gantt.getTask(task.id);
            task.type = gantt.config.types.task; //task = 1 , project = 2
            task.workflowcomplete = false;

            //Init some custom fields
            getRootParentId(task);
            task.updatenewtask = true;

            //Parent type=2 - Children type=1. This ensures the correct value gets written to the DB
            if (gantt.hasChild(id)) {
                task.type = 2;
            } else {
                task.type = 1;
            } 


            gantt_updateparents(task, "insert");

        });

I tried to provide as much info as possible, is there a way of directly assigning a template to a task? I only know how to call the function, and I have spent a while in the docs.

Thanks a lot!
Ben

#2

Hello,

Please, check the demo below. Task color depends on it’s type, and of course you can set your required condition.
docs.dhtmlx.com/gantt/snippet/83f372e2

You also need to check update task types after adding or deleting events and refresh color.