We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Accordion Control


I'm using a SfAccordionControl with ItemSource bound to an ObservableCollection called SelectedDocuments on my view model.  The accordion is defined as follows:

            ItemsSource="{Binding SelectedDocuments}" 
            AccentBrush="{StaticResource CGIBeet}" 
When the page first loads the ObservableCollection is empty so the accordion control is not rendered.  When the user selects items from a grid on the left side of the page, the items are added to the ObservableCollection and the accordion control is rendered.  I have this working correctly with no issues.

However, I am trying to achieve the following requirement:

I need the accordion control to automatically display the last item that was added to the ObservableCollection on the ViewModel.  For example, if the ObservableCollection is empty and an item is added to it, I need the accordion control to fully open the item, not just show the header row with the content collapsed. Every time an item is added to the ObservableCollection, I want all exisiting items in the accordion control to collapse and the newest item to be displayed (fully open so you can see the contents).

I'd be grateful if you could provide an example of how to achieve this requirement.


2 Replies

VV Vignesh V Syncfusion Team February 3, 2014 08:45 AM UTC

Hi Andrew,

 We have prepared a sample to address your requirement ' To Add and display a new item to Itemsource and to display its content'. In the sample we have chosen SfAccordion's 'SelectionMode' to 'one' then hooked 'CollectionChanged' event and assigned the  'SelectedIndex' to added item's new index.

 Please find the sample in below link,


Please let us know if the sample meets your requirement.


Vignesh V

AR Andrew Ridout February 3, 2014 12:01 PM UTC


This is exactly what I was looking for. Thanks very much for the quick response.


Live Chat Icon For mobile
Up arrow icon