ASP.NET Core PanelBar Overview

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.

The Telerik UI PanelBar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI PanelBar widget.

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

Basic Configuration

The following example demonstrates the basic configuration of the PanelBar.

      .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 =>

    <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 Storage"></panelbar-item>
            <panelbar-item text="Lights">
                    <panelbar-item text="Ceiling"></panelbar-item>
                    <panelbar-item text="Table"></panelbar-item>
                    <panelbar-item text="Floor"></panelbar-item>

Functionality and Features

  • Data Binding—The PanelBar supports binding to data.
  • Expand modes—The component offers Single and Multiple expand modes.
  • Events—To control the behavior of the component upon user interaction, you can use the events that the component emits.
  • Accessibility—The PanelBar is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.

Next Steps

See Also

In this article