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

Binding in SfAccordian

I am struggling on binding in SfAccordian when I have "nested" data structures. My data models look like this:

    public class Staff
        public int Id { get; set; }
        public string StaffName { get; set; }
        public List<Phone> StaffPhones { get; set; }

    public class Phone
        public int Id { get; set; }
        public int StaffId { get; set; }
        public string PhoneType { get; set; }
        public string PhoneNumber { get; set; }

I want to use the SfAccordian control as follows: I want the "header" to contain the StaffName and I want the content to display a list of PhoneType/PhoneNumber. I want to register a TapRecognizer on each line of the Content (e.g. when the user clicks on the phone number, I will launch the phone dialer native to the platform). I got stuck on simply binding the content part in SfAccordian (I haven't tried to code the TapRecognizer yet).

My view model looks like this:

    public class StaffViewModel : BaseViewModel
        public ObservableCollection<Staff> StaffMembers { get; set; }
        public Command LoadStaffCommand { get; set; }

        public StaffViewModel()
            Title = "Staff";
            StaffMembers = new ObservableCollection<Staff>();
            LoadStaffCommand = new Command(async () => await ExecuteLoadStaffCommand());

        async Task ExecuteLoadStaffCommand()
            if (IsBusy)
            IsBusy = true;

            var staff = await DataStore.GetStaffAsync();

            foreach(var person in staff)
            IsBusy = false;

The code behind my page looks like this:
    public partial class StaffPage : ContentPage
        StaffViewModel viewModel;
        public StaffPage()
            BindingContext = viewModel = new StaffViewModel();

        protected override void OnAppearing()
            if(viewModel.StaffMembers.Count == 0)

My XAML looks like this:
        <syncfusion:SfAccordion x:Name="staffAccordian" BindableLayout.ItemsSource="{Binding StaffMembers}">
                             <Label Text="{Binding StaffName}" FontAttributes="Bold" FontSize="Medium" />              
                            <Grid x:Name="staffPhoneGrid" BindableLayout.ItemsSource="{Binding StaffPhones}">
                                    <ColumnDefinition Width="0.4*" />
                                    <ColumnDefinition Width="0.6*" />
                                    <RowDefinition Height="Auto" />
                                <Label Text="{Binding StaffPhones.PhoneType}" Grid.Column="0" />
                                <Label Text="Number goes here" Grid.Column="1" />


How do I bind the content part of the accordion to the List<Phone> property?

10 Replies

GS Gokul Saravanan Syncfusion Team November 26, 2019 10:13 AM UTC

Hi Belvin, 
Thank you for using Syncfusion products. 
Based on the provided information, we have prepared the sample “Binding nested data to Accordion”. Please find the sample from the following link, 
Sample link: https://www.syncfusion.com/downloads/support/forum/149417/ze/AccordionSample-735798832

In the sample, as per your code we have binded the nested data to the SfAccordion.
We hope this helps. Please check the sample and let us know if you need any further assistance. 
Gokul Saravanan 

TB Tim Belvin November 27, 2019 01:21 AM UTC

Thank you! I was a little thrown off by your sample though. I normally implement INotifyProperyChanged in the viewmodel - not the model. 

GP Gnana Priya Namasivayam Syncfusion Team November 27, 2019 11:24 AM UTC

Hi Tim,

Thank you for the update.
You can add INotifyPropertyChanged implementation to your ViewModel class also depends on your scenario for any real-time updates to your ObservableCollection. We have updated the modified sample, please find them from the following link. 
We hope this helps. Please let us know if you need any further assistance. 
Gnana Priya N 

TB Tim Belvin November 27, 2019 03:44 PM UTC

Thanks. The link you posted doesn't work. 

GP Gnana Priya Namasivayam Syncfusion Team November 28, 2019 09:23 AM UTC

Hi Tim, 

We have checked and the given sample link is working fine and sample downloads properly without any issue. Can you please re-check at your end and let us know what issue you're facing?
Gnana Priya N 

TB Tim Belvin November 29, 2019 04:37 PM UTC

I get an "Access Denied" error. I am logged in in my Syncfusion account.

TB Tim Belvin November 29, 2019 06:25 PM UTC

Note: the first sample link worked fine. It was only the second link you sent that generates the Access Denied error.

GP Gnana Priya Namasivayam Syncfusion Team December 2, 2019 12:01 PM UTC

Hi Tim, 

We have reattached the sample, kindly download it from following link. 

Please let us know whether above sample meets your requirement. 

Gnana Priya N 

TB Tim Belvin December 2, 2019 08:08 PM UTC

Thank you! This answered my questions!

GP Gnana Priya Namasivayam Syncfusion Team December 3, 2019 08:32 AM UTC

Hi Tim, 
Thanks for the update. 
We are glad that reported issue resolves at your end. Please let us know if you have any further query from our side. 
Gnana Priya N 

Live Chat Icon For mobile
Up arrow icon