[Solved] Change the color of parents and children in Gantt

[bassam]

How to changes the color(background ) of Parent and children in the radGantt(Treelist View)?

 

[bassam]

Thank you very much
The problem was solved

      <script type="text/javascript">
                function OnClientDataBound(sender, args) {

                    var gantt = sender._widget;
                    gantt.element.find(".rgtTreelistContent table tr ").each(function (e) {
                        var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));                  
                        // colorize task per business requirements
                        if (dataItem.wBS_Activity == 1) {
                            this.style.backgroundColor = "#f99";
                        } else {
                            this.style.backgroundColor = "#9f9";
                        }
                        this.style.backgroundImage = 'none';
                    });
                }
               
        </script>

[Rumen]

Hi everyone,

Here is another approach for both the TreeList and Timeline views:

        <script type="text/javascript">
            function OnClientDataBound(sender, args) {
                var $ = $telerik.$;

                var gantt = sender._widget;
                // Iterate over task elements in the Gantt view
                gantt.element.find(".rgtTasks .rgtTaskSingle").each(function () {
                    var taskElement = this;
                    var dataUid = $(taskElement).attr("data-uid");
                    var dataItem = gantt.dataSource.getByUid(dataUid);

                    if (dataItem) {
                        var hasChildren = gantt.dataSource.data().some(t => t.parentId === dataItem.id);

                        if (hasChildren) {
                            taskElement.style.backgroundColor = "#f99"; // Red for tasks with children
                        } else if (dataItem.parentId === null) {
                            taskElement.style.backgroundColor = "red"; // Blue for root tasks
                        } else {
                            taskElement.style.backgroundColor = "#9f9"; // Green for child tasks
                        }
                        taskElement.style.backgroundImage = "none";
                    }
                });

                gantt.element.find(".rgtTreelistContent table tr ").each(function (e) {
                    var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
                    // colorize task per business requirements

                    if (dataItem.hasChildren == true) {
                        this.style.backgroundColor = "#f99";
                    } else {
                        this.style.backgroundColor = "#9f9";
                    }
                    this.style.backgroundImage = 'none';
                });
            }
        </script>
        <telerik:RadGantt RenderMode="Lightweight" runat="server" ID="RadGantt1" DataSourceID="TasksDataSource" Height="600px" ListWidth="350px" OnClientDataBound="OnClientDataBound" ...

 

Regards,
Rumen
Progress Telerik