Skip to content

Accordion

A panel with expandable sections

Like Tab Control, it supports multiple views in a single component. The Accordion component is divided into sections. Each section can hold a single component or Layout Panel. If a Layout Panel panel is used then multiple components can be displayed inside a single Accordion section.

Screenshot
An Accordion panel with sections containing a Data Grid, a Pie Chart and a Tree Map

Layout panel behavior on resize

Single components added to the Accordion component will resize on changes to expanded, full or custom.

However, if a Layout panel is used inside an Accordion, components added to the Layout panel will not resize for interactions with the Accordion unless Fill Height is checked.

Screenshot

Advanced Layout will organise the layout to best fit available viewable area, stacking components if necessary.

With Advanced Layout additional CSS can be used to further control component positioning inside the Layout panel. Use:

.advanced-item[date-widgetid="xxxxx-xxxxx-xxxxx-xxxxx] { }

Basics

Screenshot

Direction
Switch between a Vertical and Horizontal accordion control. Can nest one Accordion component inside another.

Screenshot

Sections

Title
A name for the section
Title Align
Sets position of Title in section bar: left, center or right
Expanded

When checked, the Accordion will load with the section expanded.

Controlling the open and closing of accordion sections can be achieved by assigning a boolean View State Parameter to the Expanded property. By setting the View State Parameter to True – on a click of a Data Form Submit button for example – users can determine when elements of the dashboard become visible.

Weight

This is a relative sizing measure to determine the viewable area for each section inside the Accordion.

For example, two sections of Weight 200 will each take up half of the viewable area (200/(200+200)). A section with Weight of 400 and another of 200 will occupy 66% (400/(400+200)) of the viewable area.

Section behavior on resize

If Resizable is checked, the values of Weight will change on interaction.

Resizeable

If checked, the user will be able to adjust the section size

Screenshot
Manually adjusting section size

Hide Title
When checked, suppresses the section title

Style, Format, Margins

Style for common style settings

Advanced CSS
Advanced CSS

Linking two sections

Two (but not more) sections in a single accordion can share a behavior if they use the same View State Parameter as their Expanded setting:

Screenshot

Linking two accordions

Two or more Accordions can be linked so an expansion or contraction in a section of one will be reflected in another.

To do this, assign the same View State Parameter to the sections’ Expanded settings.