Telerik UI for ASP.NET Core PanelBar Basic Usage

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
HtmlHelper
TagHelper
Files:
index.cshtml
IndexController.cs
Index_TagHelper.cshtml

Also available for:

CLIENT-SIDE API HTML HELPER API
devcraft ninja image

The PanelBar component 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.

Description

The Telerik UI for ASP.NET Core PanelBar is a multi-level component that allows users to expand and collapse its items. The PanelBar enables you to create a nice, accordion-like collapsible structure with hierarchical data.

You have full control over the PanelBar items and can display them as icons, images, HTML markup, or Kendo UI Templates. Also, based on your scenario, the component can bind to remote or local data.

As an expandable component, the PanelBar supports animation effects when the items are expanded or collapsed through user interaction.

The current demo shows a PanelBar with four sections that include images and text, and a drop-down list of options within one of the panels, and also demonstrates how to use properties such as ExpandMode, Expanded, and Enabled.

The ASP.NET Core PanelBar component is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The UI for ASP.NET Core PanelBar is a server-side wrapper for the Kendo UI for jQuery PanelBar component and supports an HtmlHelper and a TagHelper mode.

Functionality and Features

  • Data binding—Declare all items within the helper declaration, or use AJAX or server binding.
  • Expand modes—Expand only a single item or enable the multiple expand mode to expand multiple items at a time.
  • Images—Include images or sprite icons in the PanelBar items.
  • Templates—Customize the appearance of the PanelBar items through templates.
  • Animations—Enable the animation effects when expanding or collapsing PanelBar items.
  • Events—Subscribe to the PanelBar events to implement any custom logic when a specified item is selected, expanded, collapsed, and so on.
  • API—Take advantage of the variety of client-side API methods of the component.
  • Accessibility and keyboard navigation—The PanelBar is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
  • RTL support—The PanelBar enables you to render its content in a right-to-left direction.

Additional Apps

This PanelBar example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Support & Learning Resources

Additional Resources