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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding in SfAccordian

Thread ID:





149417 Nov 25,2019 09:37 PM UTC Dec 3,2019 08:32 AM UTC Xamarin.Forms 10
Tags: SfAccordion
Tim Belvin
Asked On November 25, 2019 09:37 PM UTC

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?

Gokul Saravanan [Syncfusion]
Replied On 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 

Tim Belvin
Replied On 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. 

Gnana Priya Namasivayam [Syncfusion]
Replied On 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 

Tim Belvin
Replied On November 27, 2019 03:44 PM UTC

Thanks. The link you posted doesn't work. 

Gnana Priya Namasivayam [Syncfusion]
Replied On 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 

Tim Belvin
Replied On November 29, 2019 04:37 PM UTC

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

Tim Belvin
Replied On 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.

Gnana Priya Namasivayam [Syncfusion]
Replied On 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 

Tim Belvin
Replied On December 2, 2019 08:08 PM UTC

Thank you! This answered my questions!

Gnana Priya Namasivayam [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon