BuyLog In
Ticket T1282325
Visible to All Users

Accordion: How to specify expanded items with Item component

created 4 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 3 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.

    Comments (2)
    S S
    Sandro 17 hours ago

      Hi Artem,

      Thanks for your answer. The title property is very likely unique but technically it's not guaranteed (in our case the accordion items are defined by the user and the title is defined in multiple languages and fallbacks to a different language if it's empty in the user's language), which breaks the accordion behavior if the same key is used twice. We have a unique id for each accordion item, isn't there a way to use it as key?

      And another question: is there a reason you are using selectionChanged instead of onSelectedItemKeysChange?

      Regards,
      Sandro

      Artem (DevExpress Support) 9 hours ago

        Hi Sandro,

        The Item component originates from the dxAccordionItem type, which does not allow custom props. You can extend the Item component to accommodate custom types.

        TypeScript
        type AccordionItemProps = IItemProps & { Id?: number };

function CustomAccordionItem(props: AccordionItemProps) {
  const CustomAccodionItem = <Item {...props} />;
  return CustomAccodionItem;
}
...
<Accordion
        keyExpr="Id"
        ...
      >
        <CustomAccordionItem
          title="Currencies"
          Id={1}
          visible={true}
          component={renderCustomizingCurreincies}
        />
        .....
</Accordion>

        I modified my previous example to illustrate this concept. However, this solution has limitations because some prop names are reserved and will not be transferred to the underlying dxAccordion|items collection: style, id, and className. These prop names are expected solely for actual HTML elements.

        There is no particular reason to use onSelectionChanged instead of onSelectedItemKeysChange. I took onSelectionChanged (it's a platform-independent API) from our demo for quick testing. You can implement onSelectedItemKeysChange if you need to track keys specifically, as it's more in line with React for handling the current state.

        Regards,
        Artem

        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.