PanelBar TagHelper Overview

The Telerik UI PanelBar TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI PanelBar widget.

The PanelBar displays hierarchical data as a multi-level, expandable widget.

Telerik UI for ASP.NET Core Ninja image

The PanelBar is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the PanelBar

The following example demonstrates how to define the PanelBar by using the PanelBar TagHelper.

    <kendo-panelbar name="panelbar1">

Basic Configuration

The PanelBar TagHelper configuration options are passed as attributes of the tag. You can configure items by using a nested <items> tag and bind the widget by using either the bind-to option, or the <hierarchical-datasource> tag helper.

    <kendo-panelbar name="employees" datatextfield="FullName">
                <read url="" datatype="jsonp" />
            <schema type="json">
                <hierarchical-model id="EmployeeId" has-children="HasEmployees">
    <kendo-panelbar name="project">
            <panelbar-item text="Storage" expanded="true">
                    <panelbar-item text="Wall Shelving"></panelbar-item>
                    <panelbar-item text="Floor Shelving"></panelbar-item>
                    <panelbar-item text="Kids Storag"></panelbar-item>
            <panelbar-item text="Lights">
                    <panelbar-item text="Ceiling"></panelbar-item>
                    <panelbar-item text="Table"></panelbar-item>
                    <panelbar-item text="Floor"></panelbar-item>
      .Items(panelbar =>
              .Items(projects =>
                  projects.Add().Text("New Business Plan");

                  projects.Add().Text("Sales Forecasts")
                      .Items(forecasts =>
                          forecasts.Add().Text("Q1 Forecast");
                          forecasts.Add().Text("Q2 Forecast");
                          forecasts.Add().Text("Q3 Forecast");
                          forecasts.Add().Text("Q4 Forecast");

                  projects.Add().Text("Sales Reports");

              .Items(programs =>


See Also

In this article
Not finding the help you need? Improve this article