ASP.NET Core PanelBar Overview
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.
@(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);
})
)
<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>
<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
SingleandMultipleexpand 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