ASP.NET Core PanelBar Overview

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.

• Demo page for the PanelBar TagHelper

• Demo page for the PanelBar HtmlHelper

Basic Configuration

The following example demonstrates the basic configuration of the PanelBar.

Razor

    @(Html.Kendo().PanelBar()
      .Name("panelbar")
      .ExpandMode(PanelBarExpandMode.Single)
      .Items(panelbar =>
      {
          panelbar.Add().Text("Projects")
              .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");
              });

          panelbar.Add().Text("Programs")
              .Items(programs =>
              {
                  programs.Add().Text("Monday");
                  programs.Add().Text("Tuesday");
                  programs.Add().Text("Wednesday");
                  programs.Add().Text("Thursday");
                  programs.Add().Text("Friday");
              });

          panelbar.Add().Text("Communication").Enabled(false);
      })
    )

Razor

    <kendo-panelbar name="employees" datatextfield="FullName">
        <hierarchical-datasource>
            <transport>
                <read url="https://demos.telerik.com/kendo-ui/service/Employees" datatype="jsonp" />
            </transport>
            <schema type="json">
                <hierarchical-model id="EmployeeId" has-children="HasEmployees">
                </hierarchical-model>
            </schema>
        </hierarchical-datasource>
    </kendo-panelbar>

TagHelper-items

    <kendo-panelbar name="project">
        <items>
            <panelbar-item text="Storage" expanded="true">
                <items>
                    <panelbar-item text="Wall Shelving"></panelbar-item>
                    <panelbar-item text="Floor Shelving"></panelbar-item>
                    <panelbar-item text="Kids Storage"></panelbar-item>
                </items>
            </panelbar-item>
            <panelbar-item text="Lights">
                <items>
                    <panelbar-item text="Ceiling"></panelbar-item>
                    <panelbar-item text="Table"></panelbar-item>
                    <panelbar-item text="Floor"></panelbar-item>
                </items>
            </panelbar-item>
        </items>
    </kendo-panelbar>

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

• Getting Started with the PanelBar

• Basic Usage of the PanelBar HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the PanelBar TagHelper for ASP.NET Core (Demo)

• PanelBar in Razor Pages

See Also

• Using the API of the PanelBar HtmlHelper for ASP.NET Core (Demo)
• PanelBar Client-Side API
• PanelBarBuilder Server-Side API
• PanelBar Server-Side API
• Knowledge Base Section