Skip to content

Commit 103e467

Browse files
github-actions[bot]KB BotNansiYanchevadimodiikoevska
authored
Added new kb article gantt-kb-tooltip-access-model-fields (#2169)
* Added new kb article gantt-kb-tooltip-access-model-fields * revamp kb * Update knowledge-base/gantt-kb-tooltip-access-model-fields.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * Update knowledge-base/gantt-kb-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/gantt-kb-tooltip-access-model-fields.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: NansiYancheva <nansi.qncheva@abv.bg> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> Co-authored-by: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com>
1 parent 6872b4b commit 103e467

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎knowledge-base/gantt-kb-tooltip-access-model-fields.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Access Model Fields in the Gantt Timeline Tooltip
3+
description: How to access and display fields from the model in the Tooltip of the Gantt Timeline?
4+
type: how-to
5+
page_title: How to Display Model Fields in the Gantt Tooltip?
6+
slug: gantt-kb-tooltip-access-model-fields
7+
tags: gantt, blazor, tooltip, tooltiptemplate, model, fields
8+
res_type: kb
9+
ticketid: 1653280
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Gantt for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
## Description
23+
24+
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?
25+
26+
## Solution
27+
28+
You can access and display all fields of the model in the [Gantt Timeline `TooltipTemplate`]({%slug gantt-tooltip-template%}). Follow these steps:
29+
30+
1. Cast the `TooltipTemplate` `context` to `TooltipTemplateContext`.
31+
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.
32+
3. Display the desired fields of the model instance in the `TooltipTemplate`.
33+
34+
````CSHTML
35+
<TelerikGantt Data="@Data"
36+
Width="900px"
37+
Height="600px"
38+
IdField="Id"
39+
ParentIdField="ParentId">
40+
<TooltipTemplate>
41+
@{
42+
FlatModel model = GetModel(((TooltipTemplateContext)context).Title);
43+
}
44+
@model.CustomField
45+
<br/>
46+
@model.SomeIntField
47+
</TooltipTemplate>
48+
<GanttColumns>
49+
<GanttColumn Field="Title"
50+
Expandable="true"
51+
Width="160px"
52+
Title="Task Title">
53+
</GanttColumn>
54+
<GanttColumn Field="PercentComplete"
55+
Title="Status"
56+
Width="60px"
57+
DisplayFormat="{0:P}">
58+
</GanttColumn>
59+
<GanttColumn Field="Start"
60+
Width="100px"
61+
DisplayFormat="{0:d}">
62+
</GanttColumn>
63+
<GanttColumn Field="End"
64+
Width="100px"
65+
DisplayFormat="{0:d}">
66+
</GanttColumn>
67+
</GanttColumns>
68+
<GanttViews>
69+
<GanttWeekView></GanttWeekView>
70+
</GanttViews>
71+
</TelerikGantt>
72+
73+
@code {
74+
private List<FlatModel> Data { get; set; }
75+
76+
private FlatModel GetModel(string title)
77+
{
78+
return Data.FirstOrDefault(x => x.Title == title);
79+
}
80+
81+
public class FlatModel
82+
{
83+
public int Id { get; set; }
84+
public int? ParentId { get; set; }
85+
public string Title { get; set; }
86+
public double PercentComplete { get; set; }
87+
public DateTime Start { get; set; }
88+
public DateTime End { get; set; }
89+
public string CustomField { get; set; }
90+
public int SomeIntField {get; set;}
91+
}
92+
93+
public int LastId { get; set; } = 1;
94+
95+
protected override void OnInitialized()
96+
{
97+
Data = new List<FlatModel>();
98+
var random = new Random();
99+
100+
for (int i = 1; i < 6; i++)
101+
{
102+
var newItem = new FlatModel()
103+
{
104+
Id = LastId,
105+
Title = "Task " + i.ToString(),
106+
Start = new DateTime(2021, 7, 5 + i),
107+
End = new DateTime(2021, 7, 11 + i),
108+
PercentComplete = Math.Round(random.NextDouble(), 2),
109+
CustomField = "Details for task " + i,
110+
SomeIntField = i
111+
};
112+
113+
Data.Add(newItem);
114+
var parentId = LastId;
115+
LastId++;
116+
117+
for (int j = 0; j < 5; j++)
118+
{
119+
Data.Add(new FlatModel()
120+
{
121+
Id = LastId,
122+
ParentId = parentId,
123+
Title = " Task " + i + " : " + j.ToString(),
124+
Start = new DateTime(2021, 7, 5 + j),
125+
End = new DateTime(2021, 7, 6 + i + j),
126+
PercentComplete = Math.Round(random.NextDouble(), 2),
127+
CustomField = "Details for task " + i,
128+
SomeIntField = j
129+
});
130+
131+
LastId++;
132+
}
133+
}
134+
135+
base.OnInitialized();
136+
}
137+
}
138+
````
139+
140+
## See Also
141+
142+
- [Gantt Overview - Telerik UI for Blazor]({%slug gantt-overview%})
143+
- <a href="https://demos.telerik.com/blazor-ui/gantt/templates" target="_blank">Live Demo: Gantt Templates</a>

0 commit comments

Comments
 (0)