Coloring tasks

Question

Hello, I want to change the color of a task when clicking on it. I'm using th e taskbarClick event provided with the netx behavior:

taskbarClick: function (args) {

$(args.taskbarElement).css("background-color", "#f00");

}

But now, I want to change the color of its related tasks (ascendant, descendant) too. How can I access the other tasks background-color?

Thanks.

John Rajaram · Answer

Hi Oscar, 
 
Thank you for contacting Syncfusion support. 
 
We suggest you to change the color of the ascendant and descendent tasks in the “taskbarClick” event itself similar to the clicked task. Please refer the following code snippets for changing the color of the tasks. 
 
Code snippets: 






             //... 

      $(function () { 
          $("#gantt").ejGantt({ 
              //... 
              taskbarClick: taskbarClick, 
          }); 
           
            //Clicked taskbar 
            function taskbarClick(args) { 
                var clickedData = args.data, 
                    updatedRecords = args.model.updatedRecords, 
                    recordIndex = updatedRecords.indexOf(clickedData), 
                    chartRows = this._ganttChartRows, 
                    targetRow = chartRows[recordIndex]; 
                //Apply color for clicked row 
                if (clickedData.hasChildRecords) { 
                    $(targetRow).find(".e-gantt-parenttaskbar-innerdiv").css("background-color", "#f00"); 
                    $(targetRow).find(".e-gantt-parenttaskbar-progress").css("background-color", "#f00"); 
                } 
                else if (clickedData.isMilestone) { 
                    $(targetRow).find(".e-milestone-top").css("border-bottom-color", "#f00"); 
                    $(targetRow).find(".e-milestone-bottom").css("border-top-color", "#f00"); 
                } 
                else { 
                    $(targetRow).find(".e-gantt-childtaskbar").css("background-color", "#f00"); 
                    $(targetRow).find(".e-gantt-childtaskbar-progress").css("background-color", "#f00"); 
                } 
                //Apply color for ascendant and descendant rows 
                if (clickedData.predecessor && clickedData.predecessor.length) { 
                    var precessorCollection = clickedData.predecessor, 
                        targetId, i, targetData; 
                    for (i = 0; i < precessorCollection.length; i++) { 
                        targetId = precessorCollection[i].from != clickedData.taskId ? precessorCollection[i].from : precessorCollection[i].to; 
                        $.map(updatedRecords, function (data) { 
                            if (data.taskId == targetId) 
                                targetData = data;    
                        }); 
                        if (targetData) { 
                            var dataIndex = updatedRecords.indexOf(targetData), 
                                dataRow = chartRows[dataIndex];                             
                            if (targetData.hasChildRecords) { 
                                $(dataRow).find(".e-gantt-parenttaskbar-innerdiv").css("background-color", "#4dff4d"); 
                                $(dataRow).find(".e-gantt-parenttaskbar-progress").css("background-color", "#4dff4d"); 
                            } 
                            else if (targetData.isMilestone) { 
                                $(dataRow).find(".e-milestone-top").css("border-bottom-color", "#4dff4d"); 
                                $(dataRow).find(".e-milestone-bottom").css("border-top-color", "#4dff4d"); 
                            } 
                            else { 
                                $(dataRow).find(".e-gantt-childtaskbar").css("background-color", "#4dff4d"); 
                                $(dataRow).find(".e-gantt-childtaskbar-progress").css("background-color", "#4dff4d"); 
                            } 
                        } 
                    } 
                }                 
            }             
       }); 


We have also prepared the sample with the above code snippets. Please find the sample in the following location. 
 
Sample Location: https://jsplayground.syncfusion.com/ndscee1r 
 
Note: We are changing the color for the clicked task’s predecessor based ascendant and descendant tasks. If this is not your requirement, please share us the more details regarding your requirement. This would be helpful for us to serve you better. 
 
Regards, 
John R