How to color background of kendo gantt task in 3 different percentage

Question

In kendo gantt chart we can have 2 different background color in percentage. can we implement 3 different background? https://demos.telerik.com/kendo-ui/gantt/index

Answer 1

Hi you can achieve this for kendo DataBound events. Ex:I have attached sample screenshot below

1. Actual Actual

2. In progress In Progress

3. Completed Completed

Above three status based we can change the task colors.

You can loop all the rows after data loaded, you can give color based on completed percentage. If the task was overrun means we color 100 % red.

function onDataBound(e) {
    var ganttList = e.sender.list;
    if (ganttList.dataSource) { 
        var gantt = this;
        gantt.element.find(".k-task-complete").each(function (e) {
            var dataItem = gantt.dataSource.getByUid($(this).parent().get(0).dataset.uid);
            if (!dataItem.isOverRun) {
                var completePercentWidth = dataItem.pc + "%";
                this.style.backgroundColor = "#2a9e2a";
                this.style.width = completePercentWidth;
            } else if (dataItem.isOverRun) {
                this.style.backgroundColor = "#e64b4b";
                this.style.width = "100%";
            }
        });

        var gantt = this;
        gantt.element.find(".k-task-summary-complete").each(function (e) {
            var dataItem = gantt.dataSource.getByUid($(this).parent().parent().get(0).dataset.uid);
            if (!dataItem.isOverRun) {
                var completePercentWidth = dataItem.pc + "%";
                this.style.backgroundColor = "#2a9e2a";
                this.style.width = completePercentWidth;
            } else if (dataItem.isOverRun) {
                this.style.backgroundColor = "#e64b4b";
                this.style.width = "100%";
            }
        });
    }        
}