Skip to content

Commit 416acb4

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 43b3fc4 commit 416acb4

File tree

10 files changed

+636
-89
lines changed

10 files changed

+636
-89
lines changed

‎docs-aspnet/_config.yml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,11 @@ html-helpers/editors/multiselect/how-to/*,
7171
html-helpers/interactivity/progressbar/how-to/*,
7272
html-helpers/layout/window/how-to/*,
7373
html-helpers/navigation/menu/how-to/*,
74-
html-helpers/navigation/panelbar/how-to/*,
75-
html-helpers/navigation/treeview/how-to/*,
7674
html-helpers/scheduling/scheduler/how-to/*,
7775
tag-helpers/*,
7876
knowledge-base/switch-change-messages-inside-grid.md,
79-
knowledge-base/upload-files-to-database.md]
77+
knowledge-base/upload-files-to-database.md,
78+
knowledge-base/treeview-expand-node-async]
8079

8180
exclude_navigation: ["knowledge-base/*",
8281
api/kendo.mvc/*,

‎docs-aspnet/html-helpers/navigation/panelbar/how-to/use-hierarchy-binding.md‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs-aspnet/html-helpers/navigation/treeview/how-to/bind-to-xml.md‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎docs-aspnet/html-helpers/navigation/treeview/how-to/save-items-state.md‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs-aspnet/html-helpers/navigation/treeview/how-to/use-in-sharepoint.md‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs-aspnet/knowledge-base/images/tree-entity-data-model.png‎

25.2 KB
Loading

‎docs-aspnet/knowledge-base/panelbar-hierarchy-binding.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
title: Use Hierarchy Binding with PanelBar
3+
description: Learn how to bind the {{ site.product }} PanelBar to hierarchical data.
4+
type: how-to
5+
page-title: Use Hierarchy Binding with PanelBar
6+
previous-url: /helpers/navigation/panelbar/how-to/use-hierarchy-binding, /html-helpers/navigation/panelbar/how-to/use-hierarchy-binding
7+
slug: panelbar-hierarchy-binding
8+
tags: panelbar, hierarchy, binding
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} PanelBar</td>
18+
</tr>
19+
<tr>
20+
<td>Product Version</td>
21+
<td>Created with version 2024.4.1112</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
How can I display hierarchical data in the PanelBar component?
27+
28+
## Solution
29+
30+
1. Create a `List` collection of type [`PanelBarItemModel`](/api/kendo.mvc.ui/panelbaritemmodell) and access it in the view.
31+
1. Use the [`BindTo()`](/api/kendo.mvc.ui.fluent/panelbarbuilder#bindtosystemcollectionsienumerablesystemaction) method of the PanelBar to bind the component to the collection.
32+
33+
```HtmlHelper
34+
@using Kendo.Mvc.UI.Fluent;
35+
@model List<Kendo.Mvc.UI.PanelBarItemModel>
36+
@(Html.Kendo().PanelBar()
37+
.Name("panelbar")
38+
.BindTo((List<PanelBarItemModel>)Model, (NavigationBindingFactory<PanelBarItem> mappings) =>
39+
{
40+
mappings.For<PanelBarItemModel>(binding => binding.ItemDataBound((item, category) =>
41+
{
42+
item.Text = category.Text;
43+
})
44+
.Children(category => category.Items));
45+
})
46+
)
47+
```
48+
{% if site.core %}
49+
```TagHelper
50+
<kendo-panelbar name="panelbar">
51+
<items>
52+
@{
53+
foreach (var category in (List<PanelBarItemModel>)Model)
54+
{
55+
<panelbar-item text="@category.Text">
56+
<items>
57+
@{
58+
foreach(var item in category.Items)
59+
{
60+
<panelbar-item text="@item.Text"></panelbar-item>
61+
}
62+
}
63+
</items>
64+
</panelbar-item>
65+
}}
66+
</items>
67+
</kendo-panelbar>
68+
```
69+
{% endif %}
70+
```Controller
71+
public class HomeController : Controller
72+
{
73+
public ActionResult Index()
74+
{
75+
IEnumerable<PanelBarItemModel> Items = new List<PanelBarItemModel>
76+
{
77+
new PanelBarItemModel
78+
{
79+
Text = "Furniture",
80+
Items = new List<PanelBarItemModel>
81+
{
82+
new PanelBarItemModel()
83+
{
84+
Text = "Tables & Chairs"
85+
},
86+
new PanelBarItemModel
87+
{
88+
Text = "Sofas"
89+
},
90+
new PanelBarItemModel
91+
{
92+
Text = "Occasional Furniture"
93+
}
94+
}
95+
},
96+
new PanelBarItemModel
97+
{
98+
Text = "Decor",
99+
Items = new List<PanelBarItemModel>
100+
{
101+
new PanelBarItemModel()
102+
{
103+
Text = "Bed Linen"
104+
},
105+
new PanelBarItemModel
106+
{
107+
Text = "Curtains & Blinds"
108+
},
109+
new PanelBarItemModel
110+
{
111+
Text = "Carpets"
112+
}
113+
}
114+
}
115+
};
116+
return View(Items);
117+
}
118+
}
119+
```
120+
121+
To see the complete example, refer to the [ASP.NET MVC application](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/PanelBarHierarchyBinding) in the [UI for ASP.NET MVC Examples repository](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master) that demonstrates a PanelBar component bound to hierarchical data. {% if site.core %}You can use this as a starting point to configure the same setup in an ASP.NET Core project.{% endif %}
122+
123+
## More {{ site.framework }} PanelBar Resources
124+
125+
* [{{ site.framework }} PanelBar Documentation]({%slug htmlhelpers_panelbar_aspnetcore%})
126+
127+
* [{{ site.framework }} PanelBar Demos](https://demos.telerik.com/{{ site.platform }}/panelbar)
128+
129+
{% if site.core %}
130+
* [{{ site.framework }} PanelBar Product Page](https://www.telerik.com/aspnet-core-ui/panelbar)
131+
132+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
133+
134+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
135+
136+
{% else %}
137+
* [{{ site.framework }} PanelBar Product Page](https://www.telerik.com/aspnet-mvc/panelbar)
138+
139+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
140+
141+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
142+
{% endif %}
143+
144+
## See Also
145+
146+
* [Client-Side API Reference of the PanelBar for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)
147+
* [Server-Side API Reference of the PanelBar for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/panelbar)
148+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2024%})
149+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)