Skip to content

Commit 6d41102

Browse files
kendo-botKB BotTsvetomir-Hr
authored
Added new kb article treeview-show-tooltip-on-parent (#2933)
* Added new kb article treeview-show-tooltip-on-parent * chore: update example with more real world data --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
1 parent 5d951c0 commit 6d41102

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed
Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
title: How to Show Tooltip for TreeView Parent Items in Blazor
3+
description: Learn how to create tooltip for Telerik TreeView items in Blazor using the ItemTemplate and Tooltip components.
4+
type: how-to
5+
page_title: How to Show Tooltip for TreeView Parent Items in Blazor
6+
slug: treeview-kb-show-tooltip-on-parent
7+
tags: treeview, blazor, tooltip, item template
8+
res_type: kb
9+
ticketid: 1684449
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>TreeView for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This knowledge base article answers the following questions:
26+
27+
- How to display Tooltip for Telerik TreeView items in Blazor?
28+
- How to customize Tooltip for parent items in Telerik TreeView?
29+
- How to use ItemTemplate in Telerik TreeView to show Tooltip?
30+
31+
## Solution
32+
33+
To show Tooltip for Telerik TreeView parent items, use the [`ItemTemplate`](slug:components/treeview/templates) to include the Tooltip functionality. Below is an example of how to achieve this:
34+
35+
````RAZOR
36+
<TelerikTooltip TargetSelector=".parent-item" />
37+
38+
<TelerikTreeView Data="@TreeData">
39+
<TreeViewBindings>
40+
<TreeViewBinding>
41+
<ItemTemplate>
42+
@{
43+
TreeItem itm = context as TreeItem;
44+
if (itm.HasChildren)
45+
{
46+
<span class="parent-item" title="Click the Arrow to the left">@itm.Text</span>
47+
}
48+
else
49+
{
50+
<span>
51+
<strong>@itm.Text</strong>
52+
</span>
53+
}
54+
}
55+
</ItemTemplate>
56+
</TreeViewBinding>
57+
</TreeViewBindings>
58+
</TelerikTreeView>
59+
60+
@code {
61+
private IEnumerable<TreeItem>? TreeData { get; set; }
62+
63+
protected override void OnInitialized()
64+
{
65+
LoadHierarchical();
66+
}
67+
68+
private void LoadHierarchical()
69+
{
70+
List<TreeItem> roots = new List<TreeItem>() {
71+
new TreeItem { Text = "Engineering Department", Id = 1, HasChildren = true },
72+
new TreeItem { Text = "Human Resources", Id = 2, HasChildren = true },
73+
new TreeItem { Text = "Marketing", Id = 3, HasChildren = true }
74+
};
75+
76+
// Engineering Team
77+
roots[0].Items.Add(new TreeItem
78+
{
79+
Text = "Software Development",
80+
Id = 4,
81+
HasChildren = true
82+
});
83+
roots[0].Items.Add(new TreeItem
84+
{
85+
Text = "QA and Testing",
86+
Id = 5,
87+
HasChildren = true
88+
});
89+
90+
roots[0].Items[0].Items.Add(new TreeItem
91+
{
92+
Text = "Alice Johnson (Senior Developer)",
93+
Id = 6
94+
});
95+
roots[0].Items[0].Items.Add(new TreeItem
96+
{
97+
Text = "Bob Smith (Frontend Developer)",
98+
Id = 7
99+
});
100+
101+
roots[0].Items[1].Items.Add(new TreeItem
102+
{
103+
Text = "Charlie Kim (QA Engineer)",
104+
Id = 8
105+
});
106+
107+
// HR Team
108+
roots[1].Items.Add(new TreeItem
109+
{
110+
Text = "Diana Lee (HR Manager)",
111+
Id = 9
112+
});
113+
roots[1].Items.Add(new TreeItem
114+
{
115+
Text = "Ethan Green (Recruiter)",
116+
Id = 10
117+
});
118+
119+
// Marketing Team
120+
roots[2].Items.Add(new TreeItem
121+
{
122+
Text = "Content Strategy",
123+
Id = 11,
124+
HasChildren = true
125+
});
126+
127+
roots[2].Items[0].Items.Add(new TreeItem
128+
{
129+
Text = "Fiona White (Content Lead)",
130+
Id = 12
131+
});
132+
roots[2].Items[0].Items.Add(new TreeItem
133+
{
134+
Text = "George Brown (Copywriter)",
135+
Id = 13
136+
});
137+
138+
TreeData = roots;
139+
}
140+
141+
public class TreeItem
142+
{
143+
public string Text { get; set; } = string.Empty;
144+
public int Id { get; set; }
145+
public List<TreeItem> Items { get; set; } = new List<TreeItem>();
146+
public bool HasChildren { get; set; }
147+
}
148+
}
149+
````
150+
151+
## See Also
152+
153+
- [TreeView Templates Documentation](slug:components/treeview/templates)
154+
- [Telerik Tooltip Overview](slug:tooltip-overview)
155+
- [TreeView Component Overview](slug:treeview-overview)

0 commit comments

Comments
 (0)