Use a dynamic data binding either to a local or a remote data source. This approach has been available as of the R1 2017 release and is suitable for larger data sets and for data that frequently changes.

Important

As PanelBar should be initialized after the DOM is fully loaded, make sure you create it within a $(document).ready() statement.

The PanelBar provides built-in support for asynchronously loading content from remote URLs. These URLs should return HTML content that can be loaded in the PanelBar item content area. Content <div> elements should be empty for AJAX loading to work.

The following example demonstrates how to load a PanelBar item content asynchronously via AJAX.

If ExpandMode is set to Single, the user can expand only a single root item or a single child item of a specific parent item. Expanding another root item or another child of the currently expanded item's parent will collapse the currently expanded item. This approach is also the only way to collapse an expanded item in the single expand mode.

If ExpandMode is set to Multiple, the user can expand multiple root items or children of the same parent item at a time. Expanding an item does not collapse the currently expanded items. Expanded items can be collapsed by clicking on them.

By default, a PanelBar uses animations to expand and reveal sub-items when an item header is clicked. These animations can be modified in configuration via the open and close animation properties. A PanelBar can also be configured to only allow one panel be opened at a time.

The following example demonstrates how to change the PanelBar animation and expandMode behavior.

To add items, provide the new item as a JSON object along with a reference item. A reference item is a target PanelBar item HTML element that already exists in the PanelBar. The reference item will be used to determine the placement in the hierarchy of the new item. Any valid jQuery selector can be used to obtain a reference to the target item.

As of the R1 2017 release, the PanelBar has provided an built-in functionality of attempting a retry. If the initial data binding fails and regardless of the reason for the failure, you are now prompted with a Request failed. message. To initiate a new data binding, use the Retry button.

Figure 1: The Retry button of the PanelBar prompting you to re-initiate the data binding

Was this article helpful?

/

Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated.
I expected to find other / more information.
There are typos / broken links / broken page elements.
Content is inaccurate / outdated.
Other
By checking this box you consent to Progress contacting you by email about your response on this page.

Frameworks

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.