Skip to content

Commit 1269e1b

Browse files
marin-bratanovmarin-bratanov
committed
docs(treeview): built-in navigation
1 parent f5b1d44 commit 1269e1b

File tree

4 files changed

+145
-79
lines changed

4 files changed

+145
-79
lines changed

‎_contentTemplates/treeview/basic-example.md‎

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -105,76 +105,3 @@
105105
Before continuing, make sure you are familiar with the [treeview data binding basics]({%slug components/treeview/data-binding/overview%}).
106106
#end
107107

108-
109-
#navigation-templates
110-
````CSHTML
111-
@using Telerik.Blazor.Components.TreeView
112-
113-
<TelerikTreeView Data="@TreeData">
114-
<TelerikTreeViewBindings>
115-
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
116-
<ItemTemplate>
117-
<NavLink Match="NavLinkMatch.All" href="@((context as TreeItem).Page)">
118-
@((context as TreeItem).Text)
119-
</NavLink>
120-
</ItemTemplate>
121-
</TelerikTreeViewBinding>
122-
</TelerikTreeViewBindings>
123-
</TelerikTreeView>
124-
125-
@code {
126-
public class TreeItem
127-
{
128-
public int Id { get; set; }
129-
public string Text { get; set; }
130-
public int? ParentIdValue { get; set; }
131-
public bool HasChildren { get; set; }
132-
public string Page { get; set; }
133-
public bool Expanded { get; set; }
134-
}
135-
136-
public IEnumerable<TreeItem> TreeData { get; set; }
137-
138-
protected override void OnInit()
139-
{
140-
LoadTreeData();
141-
}
142-
143-
private void LoadTreeData()
144-
{
145-
List<TreeItem> items = new List<TreeItem>();
146-
147-
items.Add(new TreeItem()
148-
{
149-
Id = 1,
150-
Text = "Project",
151-
ParentIdValue = null,
152-
HasChildren = true,
153-
Page = "one",
154-
Expanded = true
155-
});
156-
157-
items.Add(new TreeItem()
158-
{
159-
Id = 2,
160-
Text = "Design",
161-
ParentIdValue = 1,
162-
HasChildren = false,
163-
Page = "two",
164-
Expanded = true
165-
});
166-
items.Add(new TreeItem()
167-
{
168-
Id = 3,
169-
Text = "Implementation",
170-
ParentIdValue = 1,
171-
HasChildren = false,
172-
Page = "three",
173-
Expanded = true
174-
});
175-
176-
TreeData = items;
177-
}
178-
}
179-
````
180-
#end

‎components/treeview/data-binding/overview.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ The treeview items provide the following features that you control through the c
3434
* `Items` - the collection of child items that will be rendered under the current item. Required only when binding to hierarchical data.
3535
* `Text` - the text that will be shown on the item.
3636
* `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).
37+
* `Url` - the view the item will navigate to by generating a link.
3738

3839
## Data Bindings
3940

@@ -47,6 +48,7 @@ Each `TelerikTreeViewBinding` tag exposes the following properties that refer to
4748
* IconClassField => IconClass
4849
* IconField => Icon
4950
* ImageUrlField => ImageUrl
51+
* UrlField => Url
5052
* ExpandedField => Expanded
5153
* HasChildrenField => HasChildren
5254
* ItemsField => Items
@@ -65,6 +67,7 @@ public class TreeItem
6567
public bool HasChildren { get; set; }
6668
public string Icon { get; set; }
6769
public bool Expanded { get; set; }
70+
public string Url { get; set; }
6871
}
6972
````
7073

‎components/treeview/overview.md‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,78 @@ To use a Telerik TreeView for Blazor:
4242

4343
## Navigate Views
4444

45-
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`:
45+
A treeview is often used to list pages, views or sections in an application so the user can navigate through them. To do that with a treeview, you have two options:
4646

47-
>caption Navigation with treeview
47+
* Use the built-in `UrlField` in the [data bindings]({%slug components/treeview/data-binding/overview%}#data-bindings) to populate the URLs in the anchors the treeview will generate for you.
48+
* use a [Template]({%slug components/treeview/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.
4849

49-
@[template](/_contentTemplates/treeview/basic-example.md#navigation-templates)
50+
>caption Navigation with treeview through the UrlField
51+
52+
````CSHTML
53+
@using Telerik.Blazor.Components.TreeView
54+
55+
<TelerikTreeView Data="@TreeData">
56+
<TelerikTreeViewBindings>
57+
<TelerikTreeViewBinding UrlField="Page" ParentIdField="ParentIdValue">
58+
</TelerikTreeViewBinding>
59+
</TelerikTreeViewBindings>
60+
</TelerikTreeView>
61+
62+
@code {
63+
public class TreeItem
64+
{
65+
public int Id { get; set; }
66+
public string Text { get; set; }
67+
public int? ParentIdValue { get; set; }
68+
public bool HasChildren { get; set; }
69+
public string Page { get; set; }
70+
public bool Expanded { get; set; }
71+
}
72+
73+
public IEnumerable<TreeItem> TreeData { get; set; }
74+
75+
protected override void OnInit()
76+
{
77+
LoadTreeData();
78+
}
79+
80+
private void LoadTreeData()
81+
{
82+
List<TreeItem> items = new List<TreeItem>();
83+
84+
items.Add(new TreeItem()
85+
{
86+
Id = 1,
87+
Text = "Project",
88+
ParentIdValue = null,
89+
HasChildren = true,
90+
Page = "one", //the URL to navigate to
91+
Expanded = true
92+
});
93+
94+
items.Add(new TreeItem()
95+
{
96+
Id = 2,
97+
Text = "Design",
98+
ParentIdValue = 1,
99+
HasChildren = false,
100+
Page = "two", //the URL to navigate to
101+
Expanded = true
102+
});
103+
items.Add(new TreeItem()
104+
{
105+
Id = 3,
106+
Text = "Implementation",
107+
ParentIdValue = 1,
108+
HasChildren = false,
109+
Page = "three", //the URL to navigate to
110+
Expanded = true
111+
});
112+
113+
TreeData = items;
114+
}
115+
}
116+
````
50117

51118
## See Also
52119

‎components/treeview/templates.md‎

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,85 @@ position: 5
1313
The Treeview component allows you to define a custom template for its nodes. This article explains how you can use it.
1414

1515
The `ItemTemplate` of a node is defined under the `TelerikTreeViewBinding` tag.
16-
@[template](/_contentTemplates/treeview/basic-example.md#data-binding-basics-link)
1716

1817
The template receives the model to which the item is bound as its `context`. You can use it to render the desired content.
1918

2019
You can also define different templates for the different levels in each `TelerikTreeViewBinding` tag.
2120

22-
>caption Use templates to implement navigation between views
21+
You can use the template to render arbitrary content according to your application's data and logic. You can use components in it and thus provide rich content instead of plain text.
2322

24-
@[template](/_contentTemplates/treeview/basic-example.md#navigation-templates)
23+
>caption Use templates to implement navigation between views without the usage of the UrlField feature
2524
25+
````CSHTML
26+
@using Telerik.Blazor.Components.TreeView
27+
28+
<TelerikTreeView Data="@TreeData">
29+
<TelerikTreeViewBindings>
30+
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
31+
<ItemTemplate>
32+
<NavLink Match="NavLinkMatch.All" href="@((context as TreeItem).Page)">
33+
@((context as TreeItem).Text)
34+
</NavLink>
35+
</ItemTemplate>
36+
</TelerikTreeViewBinding>
37+
</TelerikTreeViewBindings>
38+
</TelerikTreeView>
39+
40+
@code {
41+
public class TreeItem
42+
{
43+
public int Id { get; set; }
44+
public string Text { get; set; }
45+
public int? ParentIdValue { get; set; }
46+
public bool HasChildren { get; set; }
47+
public string Page { get; set; }
48+
public bool Expanded { get; set; }
49+
}
50+
51+
public IEnumerable<TreeItem> TreeData { get; set; }
52+
53+
protected override void OnInit()
54+
{
55+
LoadTreeData();
56+
}
57+
58+
private void LoadTreeData()
59+
{
60+
List<TreeItem> items = new List<TreeItem>();
61+
62+
items.Add(new TreeItem()
63+
{
64+
Id = 1,
65+
Text = "Project",
66+
ParentIdValue = null,
67+
HasChildren = true,
68+
Page = "one",
69+
Expanded = true
70+
});
71+
72+
items.Add(new TreeItem()
73+
{
74+
Id = 2,
75+
Text = "Design",
76+
ParentIdValue = 1,
77+
HasChildren = false,
78+
Page = "two",
79+
Expanded = true
80+
});
81+
items.Add(new TreeItem()
82+
{
83+
Id = 3,
84+
Text = "Implementation",
85+
ParentIdValue = 1,
86+
HasChildren = false,
87+
Page = "three",
88+
Expanded = true
89+
});
90+
91+
TreeData = items;
92+
}
93+
}
94+
````
2695

2796
>caption Different templates for different node levels
2897

0 commit comments

Comments
 (0)