Use Hierarchy Binding with PanelBar
Environment
| Product | Telerik UI for ASP.NET Core PanelBar |
| Product Version | Created with version 2024.4.1112 |
Description
How can I display hierarchical data in the PanelBar component?
Solution
- Create a
Listcollection of typePanelBarItemModeland access it in the view. - Use the
BindTo()method of the PanelBar to bind the component to the collection.
@using Kendo.Mvc.UI.Fluent;
@model List<Kendo.Mvc.UI.PanelBarItemModel>
@(Html.Kendo().PanelBar()
.Name("panelbar")
.BindTo((List<PanelBarItemModel>)Model, (NavigationBindingFactory<PanelBarItem> mappings) =>
{
mappings.For<PanelBarItemModel>(binding => binding.ItemDataBound((item, category) =>
{
item.Text = category.Text;
})
.Children(category => category.Items));
})
)
<kendo-panelbar name="panelbar">
<items>
@{
foreach (var category in (List<PanelBarItemModel>)Model)
{
<panelbar-item text="@category.Text">
<items>
@{
foreach(var item in category.Items)
{
<panelbar-item text="@item.Text"></panelbar-item>
}
}
</items>
</panelbar-item>
}}
</items>
</kendo-panelbar>
public class HomeController : Controller
{
public ActionResult Index()
{
IEnumerable<PanelBarItemModel> Items = new List<PanelBarItemModel>
{
new PanelBarItemModel
{
Text = "Furniture",
Items = new List<PanelBarItemModel>
{
new PanelBarItemModel()
{
Text = "Tables & Chairs"
},
new PanelBarItemModel
{
Text = "Sofas"
},
new PanelBarItemModel
{
Text = "Occasional Furniture"
}
}
},
new PanelBarItemModel
{
Text = "Decor",
Items = new List<PanelBarItemModel>
{
new PanelBarItemModel()
{
Text = "Bed Linen"
},
new PanelBarItemModel
{
Text = "Curtains & Blinds"
},
new PanelBarItemModel
{
Text = "Carpets"
}
}
}
};
return View(Items);
}
}
To see the complete example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository that demonstrates a PanelBar component bound to hierarchical data. You can use this as a starting point to configure the same setup in an ASP.NET Core project.