The DevExpress Accordion for Blazor allows you to display collapsible panels and organize information on pages with space constraints. You can also use this component as a navigation control: arrange navigation links into a multi-level structure.

The control's built-in filter UI allows users to quickly locate items.

The control stores its root-level elements in the Items collection. For each item, you can specify its text, icon, and child items or collapsible content.

The following properties control user capability to expand and collapse items:

  • ExpandMode - Specifies how many items can be expanded at a time.
  • ExpandCollapseAction - Specifies the user's action that expands or collapses the item.

Data Binding

You can populate the Accordion component with data from a flat or hierarchical data source. This demo demonstrates how to bind the component to a flat collection of data items. The code does the following:

  • Uses the Data property to specify the data source.
  • Adds the <DataMappings> tag to the component markup.
  • Creates the DxAccordionDataMapping instance and maps item properties to data source fields. Mappings adjust the Accordion's data model to match the data source. Since this demo uses flat data, the Key and ParentKey properties are required.

The Accordion control includes a built-in item filter UI. Enable the ShowFilterPanel property to activate the search panel. If a user types in a search string, the component displays only matching nodes. You can also use the CustomFilter property to implement custom filter logic. Use the FilterString property to specify the filter criteria in code.

In this demo, root items display their expand and collapse buttons to the right (RootItemExpandButtonDisplayMode property). Non-root items use custom button icons (SubItemCollapseButtonIconCssClass and SubItemExpandButtonIconCssClass properties).