Use Hierarchy Binding with PanelBar
Environment
| Product | Telerik UI for ASP.NET MVC 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));
})
)
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.