Expandable listview -innerlist is not showing

Question

Hello , I have the following issue , Im trying to add a list that consumes an http call to generate the inner list as check boxes. the issue I have is all syncfusions examples are way to complicated to understand . Im attaching one that when you tapp on the outerlist item it generates another list and then when the checkbox is check then it collapses again . issues the inner list is not showing when check on item inside the inner list it doesnt collapses .(after checking the checkbox it should collapses the inner list, )how do I capture the checkbox selection object , can it display an alert after selecting the item and the collapses theON THE OUTER LIST I only want to display 3 items on the list and have a button that makes the list expand , I mean the outerlist on the HELPERS folder you find this file using ExpandableListView.ViewModel;using Syncfusion.ListView.XForms;using System;using System.Collections.Generic;using System.Text;using Xamarin.Forms;namespace ExpandableListView{ public class Behavior : Behavior { private SfListView listView; private SfListView listView2; private AccordionViewModel viewModel; private bookViewModel bookviewmodel; public Behavior() { viewModel = new AccordionViewModel(); bookviewmodel = new bookViewModel(); } protected override void OnAttachedTo(ContentPage bindable) { base.OnAttachedTo(bindable); listView = bindable.FindByName("listView"); viewModel.listView = listView; listView.BindingContext = viewModel; listView.ItemsSource = viewModel.ContactsInfo; //newlist attemping to display the list from this behavior =>fail // listView2 = bindable.FindByName("listView2"); // bookviewmodel.listView2 = listView2; // listView2.BindingContext = viewModel; //listView2.ItemsSource = bookviewmodel.ContactsInfo2; } }}on the folder modelusing System.ComponentModel;using Xamarin.Forms;namespace ExpandableListView{ public class Contact : INotifyPropertyChanged { #region Fields private string contactName; private string callTime; private ImageSource contactImage; private ImageSource phoneImage; private bool isVisible = false; private ImageSource sendMessage; private ImageSource blockSpan; private ImageSource callDetails; private ImageSource addContact; private ImageSource newContact; #endregion #region Properties public bool IsVisible { get { return isVisible; } set { isVisible = value; this.RaisedOnPropertyChanged("IsVisible"); } } public string ContactName { get { return contactName; } set { if (contactName != value) { contactName = value; this.RaisedOnPropertyChanged("ContactName"); } } } public string CallTime { get { return callTime; } set { if (callTime != value) { callTime = value; this.RaisedOnPropertyChanged("CallTime"); } } } public ImageSource ContactImage { get { return this.contactImage; } set { this.contactImage = value; this.RaisedOnPropertyChanged("ContactImage"); } } private string bookName; private string bookDesc; public string BookName { get { return bookName; } set { bookName = value; this.RaisedOnPropertyChanged("BookName"); } } public string BookDescription { get { return bookDesc; } set { bookDesc = value; this.RaisedOnPropertyChanged("BookDescription"); } } public ImageSource AddContact { get { return this.addContact; } set { this.addContact = value; this.RaisedOnPropertyChanged("AddContact"); } } public ImageSource NewContact { get { return this.newContact; } set { this.newContact = value; this.RaisedOnPropertyChanged("NewContact"); } } public ImageSource SendMessage { get { return this.sendMessage; } set { this.sendMessage = value; this.RaisedOnPropertyChanged("SendMessage"); } } public ImageSource BlockSpan { get { return this.blockSpan; } set { this.blockSpan = value; this.RaisedOnPropertyChanged("BlockSpan"); } } public ImageSource CallDetails { get { return this.callDetails; } set { this.callDetails = value; this.RaisedOnPropertyChanged("CallDetails"); } } public ImageSource PhoneImage { get { return this.phoneImage; } set { this.phoneImage = value; this.RaisedOnPropertyChanged("PhoneImage"); } } #endregion #region Constrator public Contact() { } public Contact(string Name) { contactName = Name; } #endregion #region Interface Member public event PropertyChangedEventHandler PropertyChanged; public void RaisedOnPropertyChanged(string _PropertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName)); } } #endregion }}in the folder viewmodel using Syncfusion.ListView.XForms;using Syncfusion.ListView.XForms.Control.Helpers;using Syncfusion.ListView.XForms.Helpers;using System;using System.Collections.Generic;using System.Collections.ObjectModel;using System.ComponentModel;using System.Linq;using System.Reflection;using System.Text;using Xamarin.Forms;namespace ExpandableListView{ public class AccordionViewModel : INotifyPropertyChanged { #region Fields int counter = 11; #endregion #region Properties public ObservableCollection ContactsInfo { get; set; } private Contact TappedItem; internal SfListView listView; public Command

Lakshmi Natarajan · Accepted Answer

Hi Pamela, 
 




Query 

Response 


When I click on the expand label container , it does work however , when click it again to collapse , it does collapse by the number of items I specify . however , the empty space remains there . I\I tried to make it go away and it will collapse the item list but not the space. 
 

Please share the issue replication sample with issue replication sample to replicate the issue on our end. It will be helpful for us to check on it and provide you the solution at the earliest. 


the other issue is that I can select the items inside the inner list . This is what I did .what I'm missing ? 
 
Also , does sync fusion has any property that lets me go to the next step on my code ,  
 
for example once the item selected on the inner list , instead of an alert I want it to collapse the inner list and scroll to another item in the page (another list ) 

You can achieve your requirement by maintaining the previous tapped item and collapse when the inner item clicked.  
 
Also, we suggest you call the ScrollToRowIndex method to programmatically scroll to the next item. 
 
Please refer to the following code snippets for more reference, 




private void TappedGestureCommandMethodone(object obj) 
{ 
    var tappedItemData = (obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as FilterModel; 
    var id = tappedItemData.Id.ToString(); 
 
    PreviousTappedItem.IsChecked = false; 
 
    var nextindex = ListView.DataSource.DisplayItems.IndexOf(PreviousTappedItem) + 1; 
    ListView.LayoutManager.ScrollToRowIndex(nextindex, Syncfusion.ListView.XForms.ScrollToPosition.End, true); 
 
    App.Current.MainPage.DisplayAlert("Tapped item", id, "Ok"); 
} 
 
Please refer to our user guidance document regarding programmatic scrolling in SfListView, 
UG link: https://help.syncfusion.com/xamarin/listview/scrolling#scrolling-to-row-index 
 
 
We have attached the tested sample to achieve your requirement in the following link, 
Sample: https://www.syncfusion.com/downloads/support/forum/173117/ze/ExpandableListView91421413 
 
Please let us know if this helps. 
 
Regards, 
Lakshmi Natarajan

Lakshmi Natarajan · Answer

Hi Pamela, Query Response the inner list is not showing We suggest you bind the ItemsSource for the inner ListView as mentioned below, Since you have defined the BookInfo collection in the ViewModel class, you need to get the BookInfo property from the BindingContext of the ListView. when check on item inside the inner list it doesnt collapses .(after checking the checkbox it should collapses the inner list, ) We suggest you bind the IsVisible property to the CheckBox’s IsChecked property as mentioned below to achieve your requirement, … … how do I capture the checkbox selection object , can it display an alert after selecting the item and the collapses the You can bind the SfListView.TapCommand and get the tapped item details from the ItemTappedEventArgs. Please refer to the following code snippets for more reference, private void TappedGestureCommandMethod(object obj) { var tappedItemData = (obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as Contact; tappedItemData.IsChecked = !tappedItemData.IsChecked; //Update check box status App.Current.MainPage.DisplayAlert("Tapped item", tappedItemData.ContactName, "Ok"); } You can also refer to our user guidance document regarding the same, UG link: https://help.syncfusion.com/xamarin/listview/mvvm#tap-command ON THE OUTER LIST I only want to display 3 items on the list and have a button that makes the list expand , I mean the outerlist We have prepared a sample to achieve your requirement. Please refer to the sample and video in the following link, Sample: https://www.syncfusion.com/downloads/support/forum/173117/ze/ExpandableListView-307807082 Video: https://www.syncfusion.com/downloads/support/forum/173117/ze/Video-263025878 Please let us know if you need further assistance. Regards, Lakshmi Natarajan

Pamela Rios · Answer

Hi thanks a lot . However , as soon as I add the service to render the list , the list comes back as null . Tried many things to trigger the service . but it seems the behavior comes before the http call . let me show you . what I did . as reference : The outer list comes from a service called getCampusList(); and it the list gets consume by Active Campuses The inner list comes after you pressed a campus item, it takes the id and passes to the second service GETBUILDINGS() and it consumes by ActiveBuildings list . as follow BdddBehaviour ExtListpublic class ExtList : Behavior { private SfListView outerlist; private FiltersViewModel viewModel; Grid ExpandCollapse; bool IsExpanded; public ExtList() { viewModel = new FiltersViewModel(); } protected override void OnAttachedTo(ContentPage bindable) { base.OnAttachedTo(bindable); ExpandCollapse = bindable.FindByName("expandCollapseone"); outerlist = bindable.FindByName("outerlist"); outerlist.BindingContext = viewModel; var tapGesture = new TapGestureRecognizer(); ExpandCollapse.GestureRecognizers.Add(tapGesture); tapGesture.Tapped += TapGesture_Tapped; outerlist.ItemsSource = viewModel.ActiveCampuses;//if we want to display only Take(3); } private void TapGesture_Tapped(object sender, EventArgs e) { this.IsExpanded = !this.IsExpanded; if (this.IsExpanded) { outerlist.ItemsSource = viewModel.ActiveCampuses; } else { outerlist.ItemsSource = viewModel.ActiveCampuses;//.Take(3); } } } public class ExtendedListViewone : SfListView { VisualContainer container; public ExtendedListViewone() { container = this.GetVisualContainer(); container.PropertyChanged += Container_PropertyChanged; } private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) { Device.BeginInvokeOnMainThread(() => { var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container); if (e.PropertyName == "Height") this.HeightRequest = extent; }); } }}Constructor public FiltersViewModel() { TapGestureCommand = new Command

Lakshmi Natarajan · Answer

Hi Pamela, We have modified our sample based on the code snippets provided and we are unable to replicate the issue on our end. We have populated our collection with delay in our sample. We have attached the tested sample in the following link, Sample: https://www.syncfusion.com/downloads/support/forum/173117/ze/ExpandableListView493543107 Please check our sample and let us know if still facing the same issue or not. If not, please modify our sample and revert us back with the following details, Issue replication sample Issue replication video Tested device details Syncfusion and Xamarin.Forms versions It will be helpful for us to check on it and provide you the solution at the earliest. Meanwhile, please ensure to invoke the PropertyChanged event for the collection to reflect the run time changes in the UI. Please refer to the following code snippets for more reference, public class FiltersViewModel : INotifyPropertyChanged { public Command

Pamela Rios · Answer

Thanks again for your prompt response , I did tried your method but unfortunately , the view comes in first . I had to hardcode the list and it does works , but not with the http service . When I click on the expand label container , it does work however , when click it again to collapse , it does collapse by the number of items I specify . however , the empty space remains there . I\I tried to make it go away and it will collapse the item list but not the space. the other issue is that I can select the items inside the inner list . This is what I did .what I'm missing ?Also , does sync fusion has any property that lets me go to the next step on my code , for example once the item selected on the inner list , instead of an alert I want it to collapse the inner list and scroll to another item in the page (another list )Xaml on the view model public Command

Pamela Rios · Answer

Thanks a lot , very helpful

Lakshmi Natarajan · Answer

Hi Pamela, 
 
We are glad that your requirement has been met at your time. Please let us know if you need further assistance. As always, we are happy to help you out. 
 
Regards, 
Lakshmi Natarajan

Pamela Rios · Answer

thanks a lot