Skip to content

Commit b937136

Browse files
marin-bratanovmarin-bratanov
committed
docs(treeview): templates
1 parent 07e6390 commit b937136

File tree

7 files changed

+186
-76
lines changed

7 files changed

+186
-76
lines changed

‎_contentTemplates/treeview/basic-example.md‎

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Flat Data
3-
page_title: Treeview for Blazor Overview | Data Binding to Flat Data
3+
page_title: Treeview for Blazor | Data Binding to Flat Data
44
description: Data Binding the Treeview for Blazor to flat data
55
slug: components/treeview/data-binding/flat-data
66
tags: telerik,blazor,treeview,data,bind,databind,databinding,flat

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Hierarchical Data
3-
page_title: Treeview for Blazor Overview | Data Binding to Hierarchical Data
3+
page_title: Treeview for Blazor | Data Binding to Hierarchical Data
44
description: Data Binding the Treeview for Blazor to hierarchical data
55
slug: components/treeview/data-binding/hierarchical-data
66
tags: telerik,blazor,treeview,data,bind,databind,databinding,hierarchical

‎components/treeview/data-binding/load-on-demand.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Load on Demand
3-
page_title: Treeview for Blazor Overview | Data Binding on Demand
3+
page_title: Treeview for Blazor | Data Binding on Demand
44
description: Load on Demand in the Treeview for Blazor
55
slug: components/treeview/data-binding/load-on-demand
66
tags: telerik,blazor,treeview,data,bind,databind,databinding,load,demand

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Overview
3-
page_title: Treeview for Blazor Overview | Data Binding Overview
3+
page_title: Treeview for Blazor | Data Binding Overview
44
description: Data Binding basics in the Treeview for Blazor
55
slug: components/treeview/data-binding/overview
66
tags: telerik,blazor,treeview,data,bind,databind,databinding,basics
@@ -82,7 +82,7 @@ The following **Example** shows how to define simple binding to match item field
8282

8383
You can define different binding settings for the different levels of nodes in a treeview. With this, the children of a node can consume a different field than their parent, and this may make your application more flexible. If you use [hierarchical data binding]({%slug components/treeview/data-binding/hierarchical-data%}), the children can even use a different model from their parent.
8484

85-
This also allows you to define a different `ItemTemplate` for different levels.
85+
This also allows you to define a different [`ItemTemplate`]({%slug components/treeview/templates%}) for different levels.
8686

8787
To define multiple bindings, add multiple `TelerikTreeViewBinding` tags and define their `Level`.
8888

‎components/treeview/overview.md‎

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ position: 0
1010

1111
# Treeview Overview
1212

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.
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]({%slug components/treeview/templates%}) for the individual nodes, render text and icons/images, and respond to events.
1414

1515
To use a Telerik TreeView for Blazor:
1616

@@ -46,76 +46,7 @@ A treeview is often used to list pages, views or sections in an application so t
4646

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

12051
## See Also
12152

‎components/treeview/templates.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Templates
3+
page_title: Treeview for Blazor | Templates
4+
description: Templates in the Treeview for Blazor
5+
slug: components/treeview/templates
6+
tags: telerik,blazor,treeview,templates
7+
published: True
8+
position: 5
9+
---
10+
11+
# Treeview Templates
12+
13+
The Treeview component allows you to define a custom template for its nodes. This article explains how you can use it.
14+
15+
The `ItemTemplate` of a node is defined under the `TelerikTreeViewBinding` tag.
16+
@[template](/_contentTemplates/treeview/basic-example.md#data-binding-basics-link)
17+
18+
The template receives the model to which the item is bound as its `context`. You can use it to render the desired content.
19+
20+
You can also define different templates for the different levels in each `TelerikTreeViewBinding` tag.
21+
22+
>caption Use templates to implement navigation between views
23+
24+
@[template](/_contentTemplates/treeview/basic-example.md#navigation-templates)
25+
26+
27+
>caption Different templates for different node levels
28+
29+
````CSHTML
30+
@using Telerik.Blazor.Components.TreeView
31+
32+
<TelerikTreeView Data="@HierarchicalData">
33+
<TelerikTreeViewBindings>
34+
<TelerikTreeViewBinding TextField="Category" ItemsField="Products">
35+
<ItemTemplate>
36+
Section: <strong>@((context as ProductCategoryItem).Category)</strong>
37+
</ItemTemplate>
38+
</TelerikTreeViewBinding>
39+
<TelerikTreeViewBinding Level="1" TextField="ProductName">
40+
<ItemTemplate>
41+
@{
42+
ProductItem currProduct = context as ProductItem;
43+
<img src="/images/products/@( currProduct.ProductId )" alt="@(currProduct.ProductName)" /> @(currProduct.ProductName)
44+
}
45+
</ItemTemplate>
46+
</TelerikTreeViewBinding>
47+
</TelerikTreeViewBindings>
48+
</TelerikTreeView>
49+
50+
@code {
51+
public IEnumerable<ProductCategoryItem> HierarchicalData { get; set; }
52+
53+
public class ProductCategoryItem
54+
{
55+
public string Category { get; set; }
56+
public List<ProductItem> Products { get; set; }
57+
public bool Expanded { get; set; }
58+
public bool HasChildren { get; set; }
59+
}
60+
61+
public class ProductItem
62+
{
63+
public int ProductId { get; set; }
64+
public string ProductName { get; set; }
65+
}
66+
67+
68+
protected override void OnInit()
69+
{
70+
LoadHierarchical();
71+
}
72+
73+
private void LoadHierarchical()
74+
{
75+
List<ProductCategoryItem> roots = new List<ProductCategoryItem>();
76+
77+
List<ProductItem> firstCategoryProducts = new List<ProductItem>() {
78+
new ProductItem { ProductName= "Product 1", ProductId = 1 },
79+
new ProductItem { ProductName= "Product 2", ProductId = 2 }
80+
};
81+
82+
roots.Add(new ProductCategoryItem
83+
{
84+
Category = "Category 1",
85+
Expanded = true,
86+
Products = firstCategoryProducts,
87+
HasChildren = firstCategoryProducts?.Count > 0,
88+
89+
});
90+
91+
roots.Add(new ProductCategoryItem
92+
{
93+
Category = "Category 2"
94+
});
95+
96+
HierarchicalData = roots;
97+
}
98+
}
99+
````
100+
101+
102+
## See Also
103+
104+
* [Data Binding a TreeView]({%slug components/treeview/data-binding/overview%})
105+
* [Live Demo: TreeView](https://demos.telerik.com/blazor-ui/treeview/index)
106+

0 commit comments

Comments
 (0)