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

1. Create a List collection of type PanelBarItemModel and access it in the view.
2. Use the BindTo() method of the PanelBar to bind the component to the collection.

Razor

@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));
            })
)

C#

    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.

More ASP.NET MVC PanelBar Resources

• ASP.NET MVC PanelBar Documentation

• ASP.NET MVC PanelBar Demos

• ASP.NET MVC PanelBar Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the PanelBar for ASP.NET MVC
• Server-Side API Reference of the PanelBar for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base