Change color of task with the same property

[oscar bartolome]

Hi,

I want to make a functionality that when I click in a task it changes its color (for example to red) and all the tasks in the gantt with a property with the same value as the clicked one (for example 'customer': 01) change its color too.

I have done the part of changing the color of the selected one, but I don't know how to change the color of the tasks with the same property value. Any idea?

Thanks.

[John Rajaram]

Hi Oscar, 

We have analyzed your requirement and we don’t have built-in support to change the color of same property value of another taskbar dynamically. But, we can achieve your requirement by “taskbarClick” & “queryTaskbarInfo” events. 

Note: In the below example we are changing the color of the taskbar based on the Progress value 

When we click on the taskbar, “taskbarClick” event will triggered and here we can get the taskbar progress value from its argument.  Then, same progress value of other taskbars row indexes can be filtered from the record collection. The filtered result of tasks indexes are passing to the “refreshRow” method to refresh the taskbar. 

By using queryTaskbarInfo event, we have updated the taskbars color based on its progress value. 

Please refer following code snippet, 

<ej-gantt id="GanttControl" 

//.. 

(taskbarClick) = taskbarClick($event) (queryTaskbarInfo) = queryTaskbarInfo($event) 

><ej-gantt> 

 

taskbarClick(args){  

        var ganttObject = $("#GanttControl").ejGantt("instance"), 

        progressValue = 0; 

        this.refreshTaskbar = true;         

       this.clickedValue = progressValue=  args.data.status;        

        

       var currentViewData = args.model.currentViewData, 

            filteredRecords = []; 

            filteredRecords = currentViewData.filter(function(data){  

                return (!data.hasChildRecords && data.status == progressValue); 

            }); 

            for(var i = 0; i<filteredRecords.length;i++){ 

                var arg = {recordIndex : currentViewData.indexOf(filteredRecords[i])}; 

                ganttObject.refreshRow(arg); // Refresh taskbar on chart side 

            } 

    } 

    queryTaskbarInfo(args){         

        if(this.refreshTaskbar){             

            if(args.data.status == this.clickedValue && this.clickedValue == 100){ 

                args.progressbarBorder = args.progressbarBackground = "lightgreen";                 

                $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none"); 

            } 

            else if(args.data.status == this.clickedValue && this.clickedValue == 60){ 

                args.progressbarBorder = args.progressbarBackground = "red";                 

                $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none"); 

            } 

        } 

    } 

 

We have also prepared a sample for your reference. Please find the sample below, 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt161785293  

Please let us know, if you need any other assistance on this. 

Regards, 

John R 

[oscar bartolome]

Ok, thanks! This works fine

[John Rajaram]

Hi Oscar, 

Thank you for the update. Please let us know if you require any other assistance. 

Regards, 

John R