This is a migrated thread and some comments may be shown as answers.

Change the color of parents and children in Gantt

2 Answers 207 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
bassam
Top achievements
Rank 1
Veteran
bassam asked on 27 May 2020, 10:27 PM

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

 

2 Answers, 1 is accepted

Sort by
0
bassam
Top achievements
Rank 1
Veteran
answered on 16 Jun 2020, 10:09 PM

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>

0
Rumen
Telerik team
answered on 24 Jan 2025, 12:02 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
Tags
Gantt
Asked by
bassam
Top achievements
Rank 1
Veteran
Answers by
bassam
Top achievements
Rank 1
Veteran
Rumen
Telerik team
Share this question
or