Skip to content

Commit 6ef5e0f

Browse files
marin-bratanovmarin-bratanov
committed
docs(treeview): data binding wip
1 parent 4a2b96b commit 6ef5e0f

File tree

4 files changed

+285
-117
lines changed

4 files changed

+285
-117
lines changed

‎_contentTemplates/treeview/basic-example.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
#basic-example-with-screenshot
2+
3+
````CSHTML
4+
@using Telerik.Blazor.Components.TreeView
5+
6+
<TelerikTreeView Data="@FlatData">
7+
<TelerikTreeViewBindings>
8+
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon"></TelerikTreeViewBinding>
9+
</TelerikTreeViewBindings>
10+
</TelerikTreeView>
11+
12+
@code {
13+
public class TreeItem
14+
{
15+
public int Id { get; set; }
16+
public string Text { get; set; }
17+
public int? ParentIdValue { get; set; }
18+
public bool HasChildren { get; set; }
19+
public string Icon { get; set; }
20+
public bool Expanded { get; set; }
21+
22+
public TreeItem()
23+
{
24+
}
25+
}
26+
public IEnumerable<TreeItem> FlatData { get; set; }
27+
28+
protected override void OnInit()
29+
{
30+
LoadFlatData();
31+
}
32+
33+
private void LoadFlatData()
34+
{
35+
List<TreeItem> items = new List<TreeItem>();
36+
37+
items.Add(new TreeItem()
38+
{
39+
Id = 1,
40+
Text = "Project",
41+
ParentIdValue = null,
42+
HasChildren = true,
43+
Icon = "folder",
44+
Expanded = true
45+
});
46+
47+
items.Add(new TreeItem()
48+
{
49+
Id = 2,
50+
Text = "Design",
51+
ParentIdValue = 1,
52+
HasChildren = true,
53+
Icon = "brush",
54+
Expanded = true
55+
});
56+
items.Add(new TreeItem()
57+
{
58+
Id = 3,
59+
Text = "Implementation",
60+
ParentIdValue = 1,
61+
HasChildren = true,
62+
Icon = "folder",
63+
Expanded = true
64+
});
65+
66+
items.Add(new TreeItem()
67+
{
68+
Id = 4,
69+
Text = "site.psd",
70+
ParentIdValue = 2,
71+
HasChildren = false,
72+
Icon = "psd",
73+
Expanded = true
74+
});
75+
items.Add(new TreeItem()
76+
{
77+
Id = 5,
78+
Text = "index.js",
79+
ParentIdValue = 3,
80+
HasChildren = false,
81+
Icon = "js"
82+
});
83+
items.Add(new TreeItem()
84+
{
85+
Id = 6,
86+
Text = "index.html",
87+
ParentIdValue = 3,
88+
HasChildren = false,
89+
Icon = "html"
90+
});
91+
items.Add(new TreeItem()
92+
{
93+
Id = 7,
94+
Text = "styles.css",
95+
ParentIdValue = 3,
96+
HasChildren = false,
97+
Icon = "css"
98+
});
99+
100+
FlatData = items;
101+
}
102+
}
103+
````
104+
105+
>caption The result from the snippet above
106+
107+
![](images/treeview-overview.png)
108+
109+
#end

‎components/treeview/data-bind.md‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
title: Data Binding
3+
page_title: Treeview for Blazor Overview | Data Binding
4+
description: Data Binding the Treeview for Blazor
5+
slug: components/treeview/data-bind
6+
tags: telerik,blazor,treeview,data,bind,databind,databinding
7+
published: True
8+
position: 1
9+
---
10+
11+
# Treeview Data Binding
12+
13+
This article explains the different ways to provide data to a TreeView component, the properties related to data binding and their results.
14+
15+
First, review:
16+
17+
* The available (bindable) [features of a treeview item](#treeview-item-features).
18+
* How to match fields in the model with the treeview item [data bindings](#data-bindings).
19+
20+
There are three modes of providing data to a treeview, and they all use the items' features:
21+
22+
* [Flat data](#flat-data) - a single collection of items with defined parent-child relationships.
23+
* [Hierarchical data](#hierarchical-data) - separate collections of items and their child items.
24+
* [Load on demand](#load-on-demand) or lazy loading - providing children to a node when it expands through an event.
25+
26+
## Treeview Item Features
27+
28+
The treeview items provide the following features that you control through the corresponding fields in their data binding:
29+
30+
* `Id` - a unique identifier for the item. Required.
31+
* `ParentId` - identifies the parent to whom the item belongs. Needed only when binding to flat data. All items with the same `ParentId` will be rendered at the same level. For a root level item, this must be `null`.
32+
* `Text` - the text that will be shown on the item.
33+
* `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).
34+
* `Expanded` - whether the item is expanded when it renders, or the user has to expand it manually.
35+
* `HasChildren` - whether the item has children. Determines whether an expand arrow is rendered next to the item. Required.
36+
* `Items` - the collection of child items that will be rendered under the current item. Needed only when binding to hierarchical data.
37+
38+
## Data Bindings
39+
40+
The properties of a treeview item match directly to a field of the model the treeview is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, under the `TelerikTreeViewBindings` tag, use the `TelerikTreeViewBinding` tag properties.
41+
42+
Each `TelerikTreeViewBinding` tag exposes the following properties that refer to item properties:
43+
44+
* IdField => Id
45+
* ParentIdField => ParentId
46+
* TextField => Text
47+
* IconClassField => IconClass
48+
* IconField => Icon
49+
* ImageUrlField => ImageUrl
50+
* ExpandedField => Expanded
51+
* HasChildrenField => HasChildren
52+
* ItemsField => Items
53+
* Level - this is used for defining [differenrt bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You should have one `TelerikTreeViewBinding` without a level.
54+
55+
The default values for the fields match the properties, so the following tree item model does not require explicit binding settings:
56+
57+
````CSHTML
58+
public class TreeItem
59+
{
60+
public int Id { get; set; }
61+
public string Text { get; set; }
62+
public int? ParentId { get; set; }
63+
public bool HasChildren { get; set; }
64+
public string Icon { get; set; }
65+
public bool Expanded { get; set; }
66+
}
67+
````
68+
69+
The following **Example** shows how to define simple binding to match item fields to a model so a tree renders the provided flat data source.
70+
71+
>caption Sample binding on a flat data source
72+
73+
@[template](/_contentTemplates/treeview/basic-example.md#basic-example-with-screenshot)
74+
75+
### Multiple Level Bindings
76+
77+
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.
78+
79+
This also allows you to define a different `ItemTemplate` for different levels.
80+
81+
To define multiple bindings, add multiple `TelerikTreeViewBinding` tags and define their `Level`.
82+
83+
If a certain level does not have an explicit data bindings tag, it will use the default one that has no level.
84+
85+
>caption How to use per-level data binding settings to change model fields
86+
87+
````CSHTML
88+
@using Telerik.Blazor.Components.TreeView
89+
90+
The third level will use the main data bindings settings that do not have a level specified
91+
92+
<TelerikTreeView Data="@FlatData">
93+
<TelerikTreeViewBindings>
94+
<TelerikTreeViewBinding ParentIdField="Parent" ExpandedField="IsExpanded"></TelerikTreeViewBinding>
95+
<TelerikTreeViewBinding Level="1" TextField="SecondText" ParentIdField="Parent" ExpandedField="IsExpanded"></TelerikTreeViewBinding>
96+
</TelerikTreeViewBindings>
97+
</TelerikTreeView>
98+
99+
@code {
100+
public IEnumerable<TreeItem> FlatData { get; set; }
101+
102+
public class TreeItem
103+
{
104+
public int Id { get; set; }
105+
public string Text { get; set; }
106+
public string SecondText { get; set; }
107+
public int? Parent { get; set; }
108+
public bool HasChildren { get; set; }
109+
public bool IsExpanded { get; set; }
110+
}
111+
112+
protected override void OnInit()
113+
{
114+
LoadFlat();
115+
}
116+
117+
private void LoadFlat()
118+
{
119+
List<TreeItem> items = new List<TreeItem>();
120+
121+
for (int i = 1; i <= 4; i++)
122+
{
123+
items.Add(new TreeItem()
124+
{
125+
Id = i,
126+
Text = "Parent " + i,
127+
Parent = null,
128+
HasChildren = i < 3,
129+
IsExpanded = i == 1
130+
});
131+
}
132+
133+
for (int i = 5; i < 15; i++)
134+
{
135+
items.Add(new TreeItem()
136+
{
137+
Id = i,
138+
SecondText = "Child " + i, //this is the field used at level 1 - it is a different field than at levels 0 and 2
139+
Parent = i < 10 ? 1 : 2,
140+
HasChildren = i == 5,
141+
IsExpanded = i == 5
142+
});
143+
}
144+
145+
for (int i = 16; i < 20; i++)
146+
{
147+
items.Add(new TreeItem()
148+
{
149+
Id = i,
150+
Text = "Second Child " + i,
151+
Parent = 5
152+
});
153+
}
154+
155+
FlatData = items;
156+
}
157+
}
158+
````
159+
160+
>caption The result from the snippet above
161+
162+
![](images/treeview-multiple-databindings-result.png)
163+
164+
## Flat Data
165+
166+
## Hierarchical Data
167+
168+
## Load On Demand
169+
170+
## See Also
171+
172+
* [Live Demo: TreeView Data Bindings](https://demos.telerik.com/blazor-ui/treeview/bindings)
173+

‎components/treeview/images/treeview-multiple-databindings-result.png‎

6.28 KB
Loading

0 commit comments

Comments
 (0)