Telerik UI for ASP.NET MVC PanelBar Basic Usage

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
index.cshtml
IndexController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API
devcraft ninja image

The PanelBar component is part of Telerik UI for ASP.NET MVC, 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 MVC PanelBaris 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 MVC PanelBar control is part of Telerik UI for ASP.NET MVC, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The UI for ASP.NET MVC PanelBar is a server-side wrapper for the Kendo UI for jQuery PanelBar component and comes in the form of an HtmlHelper.

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 a unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC 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 the ThemeBuilder.

Support & Learning Resources

Additional Resources