Can I set custom colors for tasks and subtasks?

[Ivelin Kotsev]

Hi guys how can I change the colors of tasks and subtasks with colors which are chosen in advance? 
Thanks.

[Ajithkumar Gopalakrishnan]

Hi Ivelin,

Greetings from Syncfusion Support,

To change the colors of tasks and subtasks using pre-selected colors, you can utilize the QueryChartRowInfo event. By accessing the data row through args.Row in this event, you can apply dynamic classes that correspond to the desired colors, thereby affecting the appearance of taskbars and progress bars. We have prepared a code snippet and a sample for reference.

Document link: https://blazor.syncfusion.com/documentation/gantt-chart/criticalpath#customize-taskbar-in-critical-path

 

<SfGantt>

    …..

   <GanttEvents QueryChartRowInfo="QueryChartRowInfo" TValue="TaskData"></GanttEvents>

</SfGantt>

@code {

 

    public void QueryChartRowInfo(QueryChartRowInfoEventArgs<TaskData> args)

    {

        if (args.Data.Color == "Yellow" || args.GanttTaskModel.Level == 0)

        {

            args.Row.AddClass(new string[] { "yellow-taskbar yellow-progress" });

        }

        if (args.Data.Color == "Green")

        {

            args.Row.AddClass(new string[] { "green-taskbar green-progress" });

        }

        if (args.Data.Color == "Red")

        {

            args.Row.AddClass(new string[] { "red-taskbar red-progress" });

        }

        if( !args.GanttTaskModel.HasChildRecords)

        {

            args.Row.AddClass(new string[] { "child-taskbar child-progress" });

        }

    }

 

    public class TaskData

    {

        public int TaskId { get; set; }

        public string TaskName { get; set; }

        public DateTime StartDate { get; set; }

        public DateTime EndDate { get; set; }

        public string Duration { get; set; }

        public int Progress { get; set; }

        public int? ParentId { get; set; }

        public string? Color { get; set; }

    }

 

}

 

/* Dynamic classes for colors */

<style>

    .child-taskbar .e-gantt-child-taskbar {

        background-color: #06DFF9 !Important;

        outline: 1px solid #06DFF9 !Important;

    }

 

    .child-progress .e-gantt-child-progressbar {

        background-color: #049cae !Important;

    }

 

    .yellow-taskbar .e-gantt-parent-taskbar {

        background-color: #FFFF00 !Important;

        outline: 1px solid #FFFF00 !Important;

    }

 

    .yellow-progress .e-gantt-parent-progressbar {

        background-color: #A3A300 !Important;

    }

 

    .green-taskbar .e-gantt-child-taskbar {

        background-color: #2EFF2E !Important;

        outline: 1px solid #2EFF2E !Important;

    }

 

    .green-progress .e-gantt-child-progressbar {

        background-color: #007500 !Important;

    }

 

    .red-taskbar .e-gantt-child-taskbar {

        background-color: #FF0000 !Important;

        outline: 1px solid #FF0000 !Important;

    }

 

    .red-progress .e-gantt-child-progressbar {

        background-color: #750000 !Important;

    }

</style>

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TaskbarColor1952269625

Regards,
Ajithkumar G

[Cristiano Aloigi]

Hi,

Rows property is now deprecated. Is possible to have a field for color?

[Ajithkumar Gopalakrishnan]

Hi Cristiano,

Greetings from Syncfusion Support.

Sorry for the inconvenience caused.

The Row property in QueryChartRowInfoEventArgs was mistakenly marked as obsolete and will be corrected in the upcoming NuGet release(April 3rd, 2024). Please ignore the obsolete warning and continue using this property as intended. We have attached sample, please refer it.

Sample link: https://blazorplayground.syncfusion.com/embed/BZhJjgrFeWCnGDZV?appbar=true&editor=true&result=true&errorlist=false&theme=bootstrap5

Regards,

Ajithkumar G

[Ajithkumar Gopalakrishnan]

Hi Cristiano,

Sorry for the inconvenience caused.

The reported issue regarding QueryChartRowInfoEventArgs being mistakenly marked as obsolete has been addressed, and the property has been updated in the Gantt chart. Henceforth, the QueryChartRowInfo event can be used without warnings.

Contact us if further assistance is required.

Regards,
Ajithkumar G