From ff4749eecc5d562e98d7474755480545015e5dff Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 26 Nov 2024 19:37:56 +0200 Subject: [PATCH 01/10] chore(Gantt): Add custom tooltip example in kb --- .../gantt-kb-tooltip-access-model-fields.md | 143 --------- .../gantt-tooltip-access-model-fields.md | 274 ++++++++++++++++++ 2 files changed, 274 insertions(+), 143 deletions(-) delete mode 100644 knowledge-base/gantt-kb-tooltip-access-model-fields.md create mode 100644 knowledge-base/gantt-tooltip-access-model-fields.md diff --git a/knowledge-base/gantt-kb-tooltip-access-model-fields.md b/knowledge-base/gantt-kb-tooltip-access-model-fields.md deleted file mode 100644 index 8744dff32b..0000000000 --- a/knowledge-base/gantt-kb-tooltip-access-model-fields.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Access Model Fields in the Gantt Timeline Tooltip -description: How to access and display fields from the model in the Tooltip of the Gantt Timeline? -type: how-to -page_title: How to Display Model Fields in the Gantt Tooltip? -slug: gantt-kb-tooltip-access-model-fields -tags: gantt, blazor, tooltip, tooltiptemplate, model, fields -res_type: kb -ticketid: 1653280 ---- - -## Environment - - - - - - - -
ProductGantt for Blazor
- -## Description - -I want to access and display model fields in the Gantt Timeline Tooltip. In the [`TooltipTemplate`]({%slug gantt-tooltip-template%}) I can access some of the model fields, which [match the properties of a Gantt Tree item]({%slug gantt-data-binding-overview%}#data-bindings). But how to access and show all model fields? - -## Solution - -You can access and display all fields of the model in the [Gantt Timeline `TooltipTemplate`]({%slug gantt-tooltip-template%}). Follow these steps: - -1. Cast the `TooltipTemplate` `context` to `TooltipTemplateContext`. -2. Use the [available properties of the `TooltipTemplateContext`](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TooltipTemplateContext) to find the data item in the Gantt data collection. -3. Display the desired fields of the model instance in the `TooltipTemplate`. - -````CSHTML - - - @{ - FlatModel model = GetModel(((TooltipTemplateContext)context).Title); - } - @model.CustomField -
- @model.SomeIntField - - - - - - - - - - - - - - - - -@code { - private List Data { get; set; } - - private FlatModel GetModel(string title) - { - return Data.FirstOrDefault(x => x.Title == title); - } - - public 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 CustomField { get; set; } - public int SomeIntField {get; set;} - } - - public int LastId { get; set; } = 1; - - 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), - CustomField = "Details for task " + i, - SomeIntField = 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), - CustomField = "Details for task " + i, - SomeIntField = j - }); - - LastId++; - } - } - - base.OnInitialized(); - } -} -```` - -## See Also - -- [Gantt Overview - Telerik UI for Blazor]({%slug gantt-overview%}) -- Live Demo: Gantt Templates \ No newline at end of file diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md new file mode 100644 index 0000000000..86707e0efc --- /dev/null +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -0,0 +1,274 @@ +--- +title: Access Model Fields in the Gantt Timeline Tooltip +description: How to access and display fields from the model in the Tooltip of the Gantt Timeline? +type: how-to +page_title: How to Display Model Fields in the Gantt Tooltip? +slug: gantt-kb-tooltip-access-model-fields +tags: gantt, blazor, tooltip, tooltiptemplate, model, fields +res_type: kb +ticketid: 1653280 +--- + +## Environment + + + + + + + +
ProductGantt for Blazor
+ +## Description + +I want to access and display model fields in the Gantt Timeline Tooltip. In the [`TooltipTemplate`]({%slug gantt-tooltip-template%}) I can access some of the model fields, which [match the properties of a Gantt Tree item]({%slug gantt-data-binding-overview%}#data-bindings). But how to access and show all model fields? + +## Solution + +The `TooltipTemplate` context .... . If you want to accsess and dispaly the other fields form you model, you have two options: + +* [Get the model from your data based on the `Title`](#get-the-model-from-your-data-based-on-the-context-properties) +* [Use a custom Tooltip](#use-a-custom-tooltip) + + +### Get the Model from Your Data Based on the Context Properties + +This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext`. The approach is applicable only if all items in your data have unique values for these properties and the application that hosts the Gantt is not a multi-language one. + +1. Cast the [`TooltipTemplate`]({%slug gantt-tooltip-template%}) `context` to `TooltipTemplateContext`. +2. Use the [available properties of the `TooltipTemplateContext`](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TooltipTemplateContext) to find the data item in the Gantt data collection. The example below uses the `Title` property. +3. Display the desired fields of the model instance in the `TooltipTemplate`. + +>caption Use a custom Tooltip component + +````CSHTML + + + @{ + FlatModel model = GetModel(((TooltipTemplateContext)context).Title); + } + @model.CustomField +
+ @model.SomeIntField + + + + + + + + + + + + + + + + +@code { + private List Data { get; set; } + + private FlatModel GetModel(string title) + { + return Data.FirstOrDefault(x => x.Title == title); + } + + public 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 CustomField { get; set; } + public int SomeIntField {get; set;} + } + + public int LastId { get; set; } = 1; + + 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), + CustomField = "Details for task " + i, + SomeIntField = 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), + CustomField = "Details for task " + i, + SomeIntField = j + }); + + LastId++; + } + } + + base.OnInitialized(); + } +} +```` + +### Use a Custom Tooltip + +This solution relies on disabling the built-in Tooltip and adding a custom one, so you have full control over its rendering and content. + +1. Disable the built-in Tooltip - set the `ShowTooltip` parameter to `false`. +1. Use [`TaskTemplate`]({%slug gantt-task-template%}) to add a unique `id` to the task. +1. Add a [TelerikTooltip]({%slug tooltip-overview%}) in the `TaskTemplate`. +1. Set the Tooltip's [`TargetSelector`]({%slug tooltip-overview%}#tooltip-parameters) to point to the task wrapper unique `id`. +1. Access the model from the `context` of the `TaskTemplate` and get the needed properties to display in the Tooltip. + +>caption Use a custom Tooltip component + +````CSHTML + + +
+
@taskContext.Title
+
+
+ + + + + + + + + + + + + + + + + + + +@code { + private List Data { get; set; } + + public 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 CustomField { get; set; } + public int SomeIntField { get; set; } + } + + public int LastId { get; set; } = 1; + + 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), + CustomField = "Details for task " + i, + SomeIntField = 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), + CustomField = "Details for task " + i, + SomeIntField = j + }); + + LastId++; + } + } + + base.OnInitialized(); + } +} +```` + +## See Also + +- [Gantt Overview - Telerik UI for Blazor]({%slug gantt-overview%}) +- Live Demo: Gantt Templates \ No newline at end of file From e7be1aa5c4aab60c60bfc7b3b5b4dc1f7bf5718a Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 26 Nov 2024 19:45:55 +0200 Subject: [PATCH 02/10] chore(Gantt): link fix --- knowledge-base/gantt-tooltip-access-model-fields.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index 86707e0efc..29b44c6f1f 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -27,13 +27,13 @@ I want to access and display model fields in the Gantt Timeline Tooltip. In the The `TooltipTemplate` context .... . If you want to accsess and dispaly the other fields form you model, you have two options: -* [Get the model from your data based on the `Title`](#get-the-model-from-your-data-based-on-the-context-properties) +* [Get the Model from Your Data Based on the Context Properties](#get-the-model-from-your-data-based-on-the-context-properties) * [Use a custom Tooltip](#use-a-custom-tooltip) ### Get the Model from Your Data Based on the Context Properties -This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext`. The approach is applicable only if all items in your data have unique values for these properties and the application that hosts the Gantt is not a multi-language one. +This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext` provides. The approach is applicable only if all items in your data have unique values for these properties and the application that hosts the Gantt is not a multi-language one. 1. Cast the [`TooltipTemplate`]({%slug gantt-tooltip-template%}) `context` to `TooltipTemplateContext`. 2. Use the [available properties of the `TooltipTemplateContext`](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TooltipTemplateContext) to find the data item in the Gantt data collection. The example below uses the `Title` property. From cc4a272d721c7d1411bf905f8397213634e059dc Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 28 Nov 2024 17:40:03 +0200 Subject: [PATCH 03/10] chore(Gantt): final update --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index 29b44c6f1f..486fffc2b2 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -25,7 +25,7 @@ I want to access and display model fields in the Gantt Timeline Tooltip. In the ## Solution -The `TooltipTemplate` context .... . If you want to accsess and dispaly the other fields form you model, you have two options: +You have two options to display the other fields form you model in the Tooltip: * [Get the Model from Your Data Based on the Context Properties](#get-the-model-from-your-data-based-on-the-context-properties) * [Use a custom Tooltip](#use-a-custom-tooltip) From 166506a22928de2329f96e31179fef9945c61ade Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Thu, 28 Nov 2024 17:43:34 +0200 Subject: [PATCH 04/10] Update knowledge-base/gantt-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index 486fffc2b2..eeb6209427 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -152,7 +152,7 @@ This solution relies on finding the task item in your data based on the properti This solution relies on disabling the built-in Tooltip and adding a custom one, so you have full control over its rendering and content. 1. Disable the built-in Tooltip - set the `ShowTooltip` parameter to `false`. -1. Use [`TaskTemplate`]({%slug gantt-task-template%}) to add a unique `id` to the task. +1. Use a [`TaskTemplate`]({%slug gantt-task-template%}) to render a unique `id` attribute to each task. 1. Add a [TelerikTooltip]({%slug tooltip-overview%}) in the `TaskTemplate`. 1. Set the Tooltip's [`TargetSelector`]({%slug tooltip-overview%}#tooltip-parameters) to point to the task wrapper unique `id`. 1. Access the model from the `context` of the `TaskTemplate` and get the needed properties to display in the Tooltip. From a18540486c19465ee33341adaacbb85e8fa1939d Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Thu, 28 Nov 2024 17:43:41 +0200 Subject: [PATCH 05/10] Update knowledge-base/gantt-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index eeb6209427..a800bfa895 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -151,7 +151,7 @@ This solution relies on finding the task item in your data based on the properti This solution relies on disabling the built-in Tooltip and adding a custom one, so you have full control over its rendering and content. -1. Disable the built-in Tooltip - set the `ShowTooltip` parameter to `false`. +1. Disable the built-in Tooltip by setting the Gantt `ShowTooltip` parameter to `false`. 1. Use a [`TaskTemplate`]({%slug gantt-task-template%}) to render a unique `id` attribute to each task. 1. Add a [TelerikTooltip]({%slug tooltip-overview%}) in the `TaskTemplate`. 1. Set the Tooltip's [`TargetSelector`]({%slug tooltip-overview%}#tooltip-parameters) to point to the task wrapper unique `id`. From 8036321af5b511d56848f3627ec47c148b0f583b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Thu, 28 Nov 2024 17:43:49 +0200 Subject: [PATCH 06/10] Update knowledge-base/gantt-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index a800bfa895..d501881ba1 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -36,7 +36,7 @@ You have two options to display the other fields form you model in the Tooltip: This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext` provides. The approach is applicable only if all items in your data have unique values for these properties and the application that hosts the Gantt is not a multi-language one. 1. Cast the [`TooltipTemplate`]({%slug gantt-tooltip-template%}) `context` to `TooltipTemplateContext`. -2. Use the [available properties of the `TooltipTemplateContext`](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TooltipTemplateContext) to find the data item in the Gantt data collection. The example below uses the `Title` property. +2. Use the [available properties of the `TooltipTemplateContext`](/blazor-ui/api/Telerik.Blazor.Components.TooltipTemplateContext) to find the data item in the Gantt data collection. The example below uses the `Title` property. 3. Display the desired fields of the model instance in the `TooltipTemplate`. >caption Use a custom Tooltip component From f04a5ae434acee0581529ac6a6bd2d8797aebb3b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Thu, 28 Nov 2024 17:45:43 +0200 Subject: [PATCH 07/10] Update knowledge-base/gantt-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index d501881ba1..950528889a 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -33,7 +33,7 @@ You have two options to display the other fields form you model in the Tooltip: ### Get the Model from Your Data Based on the Context Properties -This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext` provides. The approach is applicable only if all items in your data have unique values for these properties and the application that hosts the Gantt is not a multi-language one. +This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext` provides. The approach is applicable only if all items in your data have unique values for these properties and the task titles are not localized. 1. Cast the [`TooltipTemplate`]({%slug gantt-tooltip-template%}) `context` to `TooltipTemplateContext`. 2. Use the [available properties of the `TooltipTemplateContext`](/blazor-ui/api/Telerik.Blazor.Components.TooltipTemplateContext) to find the data item in the Gantt data collection. The example below uses the `Title` property. From 158d7c6743cec91db9d378edae34bd9ff3c876b9 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Thu, 28 Nov 2024 17:45:57 +0200 Subject: [PATCH 08/10] Update knowledge-base/gantt-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index 950528889a..9fed59373d 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -147,7 +147,7 @@ This solution relies on finding the task item in your data based on the properti } ```` -### Use a Custom Tooltip +### Use a Separate Tooltip Component This solution relies on disabling the built-in Tooltip and adding a custom one, so you have full control over its rendering and content. From 7bda21245a5da486fc0920ecda54ae56ca4177a3 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Thu, 28 Nov 2024 17:46:14 +0200 Subject: [PATCH 09/10] Update knowledge-base/gantt-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/gantt-tooltip-access-model-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index 9fed59373d..d95b391f22 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -31,7 +31,7 @@ You have two options to display the other fields form you model in the Tooltip: * [Use a custom Tooltip](#use-a-custom-tooltip) -### Get the Model from Your Data Based on the Context Properties +### Get the Gantt Data Item From Context Properties This solution relies on finding the task item in your data based on the properties that the `TooltipTemplateContext` provides. The approach is applicable only if all items in your data have unique values for these properties and the task titles are not localized. From 989ba1febde1efa6490d73069dbf9fed7bb94597 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 28 Nov 2024 18:01:48 +0200 Subject: [PATCH 10/10] chore(Gantt): last update --- knowledge-base/gantt-tooltip-access-model-fields.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/knowledge-base/gantt-tooltip-access-model-fields.md b/knowledge-base/gantt-tooltip-access-model-fields.md index d95b391f22..8e987d1d7b 100644 --- a/knowledge-base/gantt-tooltip-access-model-fields.md +++ b/knowledge-base/gantt-tooltip-access-model-fields.md @@ -27,8 +27,8 @@ I want to access and display model fields in the Gantt Timeline Tooltip. In the You have two options to display the other fields form you model in the Tooltip: -* [Get the Model from Your Data Based on the Context Properties](#get-the-model-from-your-data-based-on-the-context-properties) -* [Use a custom Tooltip](#use-a-custom-tooltip) +* [Get the Gantt Data Item From Context Properties](#get-the-gantt-data-item-from-context-properties) +* [Use a Separate Tooltip Component](#use-a-separate-tooltip-component) ### Get the Gantt Data Item From Context Properties @@ -157,6 +157,8 @@ This solution relies on disabling the built-in Tooltip and adding a custom one, 1. Set the Tooltip's [`TargetSelector`]({%slug tooltip-overview%}#tooltip-parameters) to point to the task wrapper unique `id`. 1. Access the model from the `context` of the `TaskTemplate` and get the needed properties to display in the Tooltip. +> This approach renders a dedicated Tooltip for each task. This makes it useful if you don't have too many tasks - otherwise, you may face performance issues. In this case, either use the [above approach](#get-the-gantt-data-item-from-context-properties) or [add only one Tooltip instance as shown here]({%slug tooltip-kb-in-grid%}). + >caption Use a custom Tooltip component ````CSHTML