Keep SfAccordionItem headers visible

[Tim Barry-Woods]

I'm using a SfAccordion with SelectionMode=ZeroOrOne, and the content inside the SfAccordionItems can be quite long, meaning that the headers move outside if the visible area when scrolling. I'd like to make it so that all of the accordion items' headers remain visible when an item is expanded. The section headers would remain "docked" at the top and bottom of the panel as appropriate, and the expanded item would fill the remaining space, with scrolling inside the expanded content area if necessary. Is this possible?

I've attached an image to demonstrate what I mean.

Thanks!

Attachment: accordionheaders_1f8282d.7z

[Vijayalakshmi Roopkumar]

Hi Tim 

 

Thank you for contacting Syncfusion Support. 

 

In our Accordion, when SelectionMode is ZeroOrone, only one Item will be expanded. However whenever the SfAccoridon get expanded, the header would always be visible. From your update, we could understand that you meant that, when you have more scrollable content in your sfaccodion item , the header get also get scrolled along with Content . If so, it is not a behavior of Accordion and it would be always dock at top of Content . So we need to know more about the following details: 

 

• How do you customize the content of SfAccordionItem?
• How do you loading the content of SfAccordionItem?
• Do you customizing the content of SfAccordionItem with any themes?
• Provide your currently using Syncfusion product version details.

 

Please provide us the requested details, it would be helpful for us to proceed on it further. 

 

Regards, 

Vijayalakshmi VR 

[Tim Barry-Woods]

Hi Vijayalakshmi,

Thanks for your response. Maybe I didn't make myself clear in my original description:

- imagine I have 3 accordion items, each containing content that is higher than the viewable area's height.

- I expand item 1.

- The actual behaviour is that a scrollbar appears, and item 1's content pushes the headers for items 2&3 down below the viewable area. When I move the scrollbar, the header for item 1 disappears above the viewable area, and items 2 & 3 only reappear if I scroll to the bottom.

- what I want to achieve is this: the content would expand to fill the available space, but items 2 & 3 would move to the bottom of the viewable area, and the scrollbar would be contained within item 1's expanded content area. Moving the scrollbar would not move any of the headers, as they would be 'docked' at the top and bottom of the panel.

Does that make sense?

Regarding your questions:

• How do you customize the content of SfAccordionItem?

I'm not sure what you mean by this - each item contains a set of controls contained within a Grid.

• How do you loading the content of SfAccordionItem?

It's declared in XAML within the declaration of each SFAccordionItem.

• Do you customizing the content of SfAccordionItem with any themes?

I'm not using themes.

• Provide your currently using Syncfusion product version details.

I am using version 18.2460.0.44 of Syncfusion.Accordion.WPF.

Thanks!

[Bharathi Rajakantham]

Hi Tim, 

 

Thanks for your update, 

 

We are checking the reported query from our side and will update you the further details on 25^th November 2020. Please let us know if you need any further assistance on this.We will be glad to assist you. 

 

Regards, 

Bharathi R 

[Vijayalakshmi Roopkumar]

Hi Tim 

 

Thank you for your patience. 

 

We have checked the reported requirement that you want to maintain the content to viewable are and not want to scroll up or down to view the other headers. If so we can able to scroll the content inside of SfAccordionItem , so that you can able to view the SfAccordion Header without scrolling . However you need to scroll down to access the other headers, since it is a behavior of MS ItemsControl. Please find the sample from the following location: 

 

Sample: https://www.syncfusion.com/downloads/support/forum/159707/ze/Accordionnew2118709007.zip 

 

So please try this at your end and let us know if it meets your requirement. 

 

Regards, 

Vijayalakshmi VR