From 293eb767ef6f28290121bcf3a355676954537b7c Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 17 May 2024 16:46:06 +0300 Subject: [PATCH 1/3] kb(gantt): different colors for tasks --- .../gantt-different-colors-for-tasks.md | 230 ++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 knowledge-base/gantt-different-colors-for-tasks.md diff --git a/knowledge-base/gantt-different-colors-for-tasks.md b/knowledge-base/gantt-different-colors-for-tasks.md new file mode 100644 index 000000000..55b8259d4 --- /dev/null +++ b/knowledge-base/gantt-different-colors-for-tasks.md @@ -0,0 +1,230 @@ +--- +title: Set Different Colors for the Gantt Tasks +description: How to set different colors for the Gantt tasks? +type: how-to +page_title: Set Different Colors for the Gantt Tasks +slug: gantt-kb-different-colors-for-tasks +position: +tags: +ticketid: 1536209 +res_type: kb +--- + +## Environment + + + + + + + +
ProductGantt for Blazor
+ + +## Description + +I want to set different colors for the Gantt tasks. I store the colors in my data source. How to apply the colors from my data source to the rendered Gantt tasks? + + +## Solution + +Follow these steps to apply the desired colors to the Gantt tasks: + +1. Use a [Task Template]({%slug gantt-task-template%}) to override the default task rendering. +1. In the template, declare a wrapping element that will contain all the task details. Specify the desired task information inside. +1. Add an attribute `style="background-color"` to the wrapper. Set the color from the template `context` or any other desired color. +1. Use custom CSS remove the default padding of the task template element (`
`) and adjust the custom wrapper, so it covers the whole task element. This will ensure that the background color will cover the whole task. + +>caption Set Different Colors for the Gantt Tasks + +````CSHTML + + + @{ + CurrTask = context; + } +
+
@CurrTask.Title
+
Assignee: @CurrTask.Assignee
+
+
+ + + + + + + + + + + + + + +@code { + private List Data { get; set; } + + private FlatModel CurrTask { get; set; } = new FlatModel(); + + private int LastId { get; set; } = 1; + + private List Colors = new List() + { + "lightgreen", + "orange", + "lightblue", + "cyan", + "lightcoral", + "lightpink" + }; + + protected override void OnInitialized() + { + Data = new List(); + var random = new Random(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Task " + i.ToString(), + Start = new DateTime(2021, 7, 5 + i), + End = new DateTime(2021, 7, 11 + i), + PercentComplete = Math.Round(random.NextDouble(), 2), + Color = Colors[i] + }; + + Data.Add(newItem); + var parentId = LastId; + LastId++; + + for (int j = 0; j < 5; j++) + { + Data.Add(new FlatModel() + { + Id = LastId, + ParentId = parentId, + Title = " Task " + i + " : " + j.ToString(), + Start = new DateTime(2021, 7, 5 + j), + End = new DateTime(2021, 7, 6 + i + j), + PercentComplete = Math.Round(random.NextDouble(), 2), + Assignee = " Employee " + j, + Color = Colors[j] + }); + + LastId++; + } + } + + base.OnInitialized(); + } + + private void UpdateItem(GanttUpdateEventArgs args) + { + var item = args.Item as FlatModel; + + var foundItem = Data.FirstOrDefault(i => i.Id.Equals(item.Id)); + + if (foundItem != null) + { + foundItem.Title = item.Title; + foundItem.Start = item.Start; + foundItem.End = item.End; + foundItem.PercentComplete = item.PercentComplete; + } + } + + private void DeleteItem(GanttDeleteEventArgs args) + { + var item = Data.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); + + RemoveChildRecursive(item); + } + + private void RemoveChildRecursive(FlatModel item) + { + var children = Data.Where(i => item.Id.Equals(i.ParentId)).ToList(); + + foreach (var child in children) + { + RemoveChildRecursive(child); + } + + Data.Remove(item); + } + + class FlatModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Title { get; set; } + public double PercentComplete { get; set; } + public DateTime Start { get; set; } + public DateTime End { get; set; } + public string Assignee { get; set; } + public string Color { get; set; } + } +} + + +```` \ No newline at end of file From 39253a160c930c48cdccc6e2180fdb01b17c3b35 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 20 May 2024 19:14:48 +0300 Subject: [PATCH 2/3] Update knowledge-base/gantt-different-colors-for-tasks.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/gantt-different-colors-for-tasks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-different-colors-for-tasks.md b/knowledge-base/gantt-different-colors-for-tasks.md index 55b8259d4..a27400289 100644 --- a/knowledge-base/gantt-different-colors-for-tasks.md +++ b/knowledge-base/gantt-different-colors-for-tasks.md @@ -33,7 +33,7 @@ Follow these steps to apply the desired colors to the Gantt tasks: 1. Use a [Task Template]({%slug gantt-task-template%}) to override the default task rendering. 1. In the template, declare a wrapping element that will contain all the task details. Specify the desired task information inside. 1. Add an attribute `style="background-color"` to the wrapper. Set the color from the template `context` or any other desired color. -1. Use custom CSS remove the default padding of the task template element (`
`) and adjust the custom wrapper, so it covers the whole task element. This will ensure that the background color will cover the whole task. +1. Use custom CSS to remove the default padding of the task template element (`
`) and adjust the custom wrapper, so it covers the whole task element. This ensures that the background color covers the whole task. >caption Set Different Colors for the Gantt Tasks From 40de10b610ccea28ba98a7c68c83a5f265c544bd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 4 Jun 2024 16:46:08 +0300 Subject: [PATCH 3/3] chore(gantt): address feedback --- components/gantt/timeline/templates/task.md | 3 ++- knowledge-base/gantt-different-colors-for-tasks.md | 11 +++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/components/gantt/timeline/templates/task.md b/components/gantt/timeline/templates/task.md index 7d864c9ed..27ffc1690 100644 --- a/components/gantt/timeline/templates/task.md +++ b/components/gantt/timeline/templates/task.md @@ -175,4 +175,5 @@ The `TaskTemplate` is of type `RenderFragment`, so the `context` has the ## See Also - * [Live Demo: Gantt Templates](https://demos.telerik.com/blazor-ui/gantt/templates) \ No newline at end of file + * [Live Demo: Gantt Templates](https://demos.telerik.com/blazor-ui/gantt/templates) + * [How to set different colors for the Gantt tasks]({%slug gantt-kb-different-colors-for-tasks%}) diff --git a/knowledge-base/gantt-different-colors-for-tasks.md b/knowledge-base/gantt-different-colors-for-tasks.md index a27400289..876a7c0d6 100644 --- a/knowledge-base/gantt-different-colors-for-tasks.md +++ b/knowledge-base/gantt-different-colors-for-tasks.md @@ -32,7 +32,7 @@ Follow these steps to apply the desired colors to the Gantt tasks: 1. Use a [Task Template]({%slug gantt-task-template%}) to override the default task rendering. 1. In the template, declare a wrapping element that will contain all the task details. Specify the desired task information inside. -1. Add an attribute `style="background-color"` to the wrapper. Set the color from the template `context` or any other desired color. +1. Add an attribute `style="background-color"` to the wrapper and set the desired color. If your model has a color field that you want to use, you may get its value from the template's `context`. 1. Use custom CSS to remove the default padding of the task template element (`
`) and adjust the custom wrapper, so it covers the whole task element. This ensures that the background color covers the whole task. >caption Set Different Colors for the Gantt Tasks @@ -227,4 +227,11 @@ Follow these steps to apply the desired colors to the Gantt tasks: background: rgba(252, 98, 87, .7); } -```` \ No newline at end of file +```` + +## See Also + +* [Gantt Task Overview]({%slug gantt-overview%}) +* [Gantt Task Template]({%slug gantt-task-template%}) +* [Live Gantt Demos](https://demos.telerik.com/blazor-ui/gantt/index) +* [Gantt API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikGantt-1)