BuyLog In
Ticket T1282325
Visible to All Users

Accordion: How to specify expanded items with Item component

created 2 days ago

Hi,

We use the Accordion component in our React app with the Item component to define the list of accordion items. We could like to use the component in controlled mode for the expanded items and use multiple={true} so let the user expand multiple items. How can we do this?

  • selectedIndex only accepts a single value, so it doesn't work for multiple expanded items
  • selectedItems expects a list of item objects (I guess?), which we don't have when we use the Item component
  • selectedItemKeys expects a list of keys, but how can we define item key when we use the Item component?

Regards,
Sandro

Sign in to comment on this post

Answers approved by DevExpress Support

created 2 days ago

Hello,

You can set Accordion|keyExpr to title in this case because each Item allows you to define this field. Then, you can define the selectedItemKeys property to display required items in the expanded state.
If you need to allow users to collapse these items, you can handle onSelectionChanged to change the selectedItemKeys property. Please refer to the following example as a starting point: CodeSandBox
Alternatively, you can define defaultSelectedItemKeys if you don't need to track the current selection state.

Let me know if this solution helps.

    Sign in to comment on this post

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.