Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
How to changes the color(background ) of Parent and children in the radGantt(Treelist View)?
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>
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