Skip to content

Commit 4a2b96b

Browse files
marin-bratanovmarin-bratanov
committed
docs(treeview): overview wip
1 parent f78fc20 commit 4a2b96b

File tree

3 files changed

+247
-10
lines changed

3 files changed

+247
-10
lines changed

‎_config.yml‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -221,29 +221,32 @@ intro_columns:
221221
-
222222
categories:
223223
-
224-
title: Data Management
224+
title: "Data Management"
225225
items:
226226
"Grid": "components/grid/overview"
227227

228-
-
229-
title: Editors
230-
items:
231-
"Textbox": "components/textbox/overview"
232-
"Numeric Textbox": "components/numerictextbox/overview"
233-
"Date Input": "components/dateinput/overview"
234-
"DropDownList": "components/dropdownlist/overview"
235-
-
236-
categories:
237228
-
238229
title: "Navigation"
239230
items:
240231
"Button": "components/button/overview"
241232
"Tab Strip": "components/tabstrip/overview"
233+
"TreeView": "components/treeview/overview"
234+
242235
-
243236
title: "Scheduling"
244237
items:
245238
"Calendar": "components/calendar/overview"
246239
"Date Picker": "components/datepicker/overview"
240+
-
241+
categories:
242+
-
243+
title: "Editors"
244+
items:
245+
"Textbox": "components/textbox/overview"
246+
"Numeric Textbox": "components/numerictextbox/overview"
247+
"Date Input": "components/dateinput/overview"
248+
"DropDownList": "components/dropdownlist/overview"
249+
247250
-
248251
title: "Layout"
249252
items:

‎components/treeview/images/treeview-overview.png‎

5.64 KB
Loading

‎components/treeview/overview.md‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
---
2+
title: Overview
3+
page_title: Treeview for Blazor Overview
4+
description: Overview of the Treeview for Blazor
5+
slug: components/treeview/overview
6+
tags: telerik,blazor,treeview,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Treeview Overview
12+
13+
The Treeview component displays data (flat or hierarchical) in a traditional tree-like structure. You can navigate through the items and their children, define templates for the individual nodes, render text and icons/images, and respond to events.
14+
15+
To use a Telerik TreeView for Blazor:
16+
17+
1. add the `TelerikTreeView` tag
18+
1. provide a collection of models to its `Data` property (read more in the Data Binding article)
19+
1. match the fields in the models with the binding schema for the nodes
20+
21+
>caption Basic treeview with flat data binding and built-in icons
22+
23+
````CSHTML
24+
@using Telerik.Blazor.Components.TreeView
25+
26+
<TelerikTreeView Data="@FlatData">
27+
<TelerikTreeViewBindings>
28+
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon"></TelerikTreeViewBinding>
29+
</TelerikTreeViewBindings>
30+
</TelerikTreeView>
31+
32+
@code {
33+
public class TreeItem
34+
{
35+
public int Id { get; set; }
36+
public string Text { get; set; }
37+
public int? ParentIdValue { get; set; }
38+
public bool HasChildren { get; set; }
39+
public string Icon { get; set; }
40+
public bool Expanded { get; set; }
41+
42+
public TreeItem()
43+
{
44+
}
45+
}
46+
public IEnumerable<TreeItem> FlatData { get; set; }
47+
48+
protected override void OnInit()
49+
{
50+
LoadFlatData();
51+
}
52+
53+
private void LoadFlatData()
54+
{
55+
List<TreeItem> items = new List<TreeItem>();
56+
57+
items.Add(new TreeItem()
58+
{
59+
Id = 1,
60+
Text = "Project",
61+
ParentIdValue = null,
62+
HasChildren = true,
63+
Icon = "folder",
64+
Expanded = true
65+
});
66+
67+
items.Add(new TreeItem()
68+
{
69+
Id = 2,
70+
Text = "Design",
71+
ParentIdValue = 1,
72+
HasChildren = true,
73+
Icon = "brush",
74+
Expanded = true
75+
});
76+
items.Add(new TreeItem()
77+
{
78+
Id = 3,
79+
Text = "Implementation",
80+
ParentIdValue = 1,
81+
HasChildren = true,
82+
Icon = "folder",
83+
Expanded = true
84+
});
85+
86+
items.Add(new TreeItem()
87+
{
88+
Id = 4,
89+
Text = "site.psd",
90+
ParentIdValue = 2,
91+
HasChildren = false,
92+
Icon = "psd",
93+
Expanded = true
94+
});
95+
items.Add(new TreeItem()
96+
{
97+
Id = 5,
98+
Text = "index.js",
99+
ParentIdValue = 3,
100+
HasChildren = false,
101+
Icon = "js"
102+
});
103+
items.Add(new TreeItem()
104+
{
105+
Id = 6,
106+
Text = "index.html",
107+
ParentIdValue = 3,
108+
HasChildren = false,
109+
Icon = "html"
110+
});
111+
items.Add(new TreeItem()
112+
{
113+
Id = 7,
114+
Text = "styles.css",
115+
ParentIdValue = 3,
116+
HasChildren = false,
117+
Icon = "css"
118+
});
119+
120+
FlatData = items;
121+
}
122+
}
123+
````
124+
125+
>caption The result from the snippet above
126+
127+
![](images/treeview-overview.png)
128+
129+
>caption Component namespace and reference
130+
131+
````CSHTML
132+
@using Telerik.Blazor.Components.TreeView
133+
134+
<TelerikTreeView @ref="theTreeView">
135+
</TelerikTreeView>
136+
137+
@code {
138+
Telerik.Blazor.Components.TreeView.TelerikTreeView theTreeView;
139+
}
140+
````
141+
142+
The treeview items provide the following features that you control through the corresponding fields in their data binding:
143+
144+
* `Id` - a unique identifier for the item. Required.
145+
* `ParentId` - identifies the parent to whom the item belongs. Needed only when binding to flat data.
146+
* `Text` - the text that will be shown on the item.
147+
* `Icon` / `IconClass` / `ImageUrl` - the [Telerik icon]({%slug general-information/font-icons%}), a class for a custom font icon, or the URL to a raster image that will be rendered in the item. They have the listed order of precedence in case more than one is present in the data (that is, an `Icon` will have the highest importance).
148+
* `Expanded` - whether the item is expanded when it renders, or the user has to expand it manually.
149+
* `HasChildren` - whether the item has children. Determines whether an expand arrow is rendered next to the item.
150+
* `Items` - the collection of child items that will be rendered under the current item. Needed only when binding to hierarchical data.
151+
152+
153+
154+
## Navigate Views
155+
156+
A treeview is often used to list pages, views or sections in an application so the user can navigate through them. In Blazor, navigation is accomplished through a `NavLink` element, and to use it in a treeview, you must use its `ItemTemplate`:
157+
158+
>caption Navigation with treeview
159+
160+
````CSHTML
161+
@using Telerik.Blazor.Components.TreeView
162+
163+
<TelerikTreeView Data="@TreeData">
164+
<TelerikTreeViewBindings>
165+
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
166+
<ItemTemplate>
167+
<NavLink Match="NavLinkMatch.All" href="@((context as TreeItem).Page)">
168+
@((context as TreeItem).Text)
169+
</NavLink>
170+
</ItemTemplate>
171+
</TelerikTreeViewBinding>
172+
</TelerikTreeViewBindings>
173+
</TelerikTreeView>
174+
175+
@code {
176+
public class TreeItem
177+
{
178+
public int Id { get; set; }
179+
public string Text { get; set; }
180+
public int? ParentIdValue { get; set; }
181+
public bool HasChildren { get; set; }
182+
public string Page { get; set; }
183+
public bool Expanded { get; set; }
184+
}
185+
186+
public IEnumerable<TreeItem> TreeData { get; set; }
187+
188+
protected override void OnInit()
189+
{
190+
LoadTreeData();
191+
}
192+
193+
private void LoadTreeData()
194+
{
195+
List<TreeItem> items = new List<TreeItem>();
196+
197+
items.Add(new TreeItem()
198+
{
199+
Id = 1,
200+
Text = "Project",
201+
ParentIdValue = null,
202+
HasChildren = true,
203+
Page = "one",
204+
Expanded = true
205+
});
206+
207+
items.Add(new TreeItem()
208+
{
209+
Id = 2,
210+
Text = "Design",
211+
ParentIdValue = 1,
212+
HasChildren = false,
213+
Page = "two",
214+
Expanded = true
215+
});
216+
items.Add(new TreeItem()
217+
{
218+
Id = 3,
219+
Text = "Implementation",
220+
ParentIdValue = 1,
221+
HasChildren = false,
222+
Page = "three",
223+
Expanded = true
224+
});
225+
226+
TreeData = items;
227+
}
228+
}
229+
````
230+
231+
## See Also
232+
233+
* [Live Demo: TreeView](https://demos.telerik.com/blazor-ui/treeview/index)
234+

0 commit comments

Comments
 (0)