Binding to nested data in Accordion or ListView

[Reza Mohamed]

I have a model with nested data like so:

public class Employees 

{

public string Name { get; set; }

public List<Customers> Customers { get; set; }

}

public class Customers 

{

public string CustName { get; set; }

public string CustAddress { get; set; }

}

I would like to use MVVM to populate an Accordion View or Listview only with the Header being the Employees/Name, and the content being Customers/CustName for every Customer.

(1) Can the model collection be List or does it need to be of type ObservableCollection, including the nested Customers?

(2) I think I can achieve this by using and Accordion View and setting the Header to the Employees/Name, and the content to the nested List, but I haven't been successful with displaying the nested data. Can you show a small sample?

(3) The entire thing can be achieved by using only the ListView and setting the GroupHeader to Employees/Name and the Content to the nested Customers right? I have not been successful in showing the open/close button in this case for each of the groups. Can you show a small sample?

Thank you

[Gnana Priya Namasivayam]

Hi Reza,

Thank you for contacting Syncfusion support.

Reg: Can the model collection be List or Observable collection

You can either bind List or Observable collection to ListView/Accordion which depends on your property bound to the control if your binding the property which is to be changed at runtime then you must be Observable collection else you can use List. It depends on your requirements.

Reg: Accordion 

You can able to bind the nested data to accordion and you can find the model sample that we have already published in our documentation from the following link for your reference.

https://help.syncfusion.com/xamarin/accordion/bindablelayout

Regarding ListView

In order to expand and collapse groups in SfListView, you must add AllowGroupExpandCollapse property as True. and it is not necessary to bind the provide the nested date to bind listview. We have prepared the sample-based o your requirement and attached below and you can also customize the GroupHeader based on your requirement.

Please find the sample from the following link.

Grouping Documentation: https://help.syncfusion.com/xamarin/listview/grouping?cs-save-lang=1&cs-lang=xaml#programmatic-grouping

SampleLink: https://www.syncfusion.com/downloads/support/forum/149119/ze/ExpandCollapse-939423711

If your requirement is to bind the nested collection of data, please refer to our listview with nested data.

NestedListView: https://help.syncfusion.com/xamarin/listview/working-with-sflistview#working-with-nested-listview 

We hope the above sample and information helps. Please let us know if you need any further assistance.

Regards,

Gnana Priya N

[Reza Mohamed]

Reg: Accordion 

That link does not have any sample or documentation regarding nested Lists and accessing the data from a model like I have above.

Regarding ListView

Again, this is a nested Listview, my question is related to displaying data from a nested List<>, your link is not related to my questions.

For both cases:

public class Employees 

{

public string Name { get; set; }

public List Customers { get; set; }

        public ICommand SelectedEmpCommand { get; set; }

}

public class Customers 

{

public string CustName { get; set; }

public string CustAddress { get; set; }

}

the header text would be the Employees.Name, and the content items should be everything in Employees.Customers.CustName(can be many), for each listview item i want to bind the SelectedEmpCommand to that item.

This seems to display the accordion and listview, but there is lots of trailing empty space below the labels inside the listview stacklayout and the command doesn't seem to bind (Tapgesturerecognizer).

                <accordion:SfAccordion x:Name="DayAccordion" BindableLayout.ItemsSource="{Binding Employees}" ExpandMode="SingleOrNone">
 
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <accordion:AccordionItem>
                                <accordion:AccordionItem.Header>
                                    <Label Text="{Binding Name}" />
                                accordion:AccordionItem.Header>
 
                                <accordion:AccordionItem.Content>
                              
                                        <listview:SfListView ItemsSource="{Binding Customers}" TapCommand="{Binding SelectedEmpCommand}">
 
                                            <listview:SfListView.ItemTemplate>
                                                <DataTemplate>
                                                    <StackLayout>
                                                        <Label
                                            Padding="10,10"
                                            FontSize="Large"
                                            Text="{Binding CustName}">                                                            <Label.GestureRecognizers>
                                                                <TapGestureRecognizer Command="{Binding SelectedEmpCommand, Source={x:Reference DayAccordion}}">
                                                                TapGestureRecognizer>
                                                            Label.GestureRecognizers>
                                                        Label>

                                                    StackLayout>
                                                DataTemplate>
                                            listview:SfListView.ItemTemplate>
 
 
                                        listview:SfListView>
 
           
                                accordion:AccordionItem.Content>
                            accordion:AccordionItem>
 
                        DataTemplate>
 
                    BindableLayout.ItemTemplate>
 
                accordion:SfAccordion>

[Gnana Priya Namasivayam]

Hi Reza,

Based on the provided information, we suspect you suspect that you are stating that Listview inside Accordion as NestedListView. We have prepared the sample based on the shared code snippets by loading ListView inside AccordionItem and added TapGesture to the ListViewItem as mentioned to the Label. We could able to tap the TapCommand bound to the TapGesture of Label and can able to replicate the Empty space below label inside stack in Android and the remaining platforms working fine while scrolling. 

We have attached the sample which has TapCommand and Empty space issue, can you please find the attached sample and video from the following link:

SampleLink: https://www.syncfusion.com/downloads/support/forum/149119/ze/GettingStarted-18770672

We have attached the video of replicating the empty space issue, can you please check and confirm us you're also mentioning the same?

Video: https://www.syncfusion.com/downloads/support/forum/149119/ze/EmptySpaceIssueInAndroid-1013107903

Kindly check the above attachments and confirm whether you are getting the same issue as recorded else revert us back with the issue replicated or modified sample to validate and update you further details at the earliest.

Regards,

Gnana Priya N