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
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. Need to bind and cache data, with pull request. refresh and other options.

Need to bind and cache data, with pull request. refresh and other options.

Hi,

I recently joined Xamarin and awesome Syncfusion (as felt xamarin controls are too abstract).
What i found out cool about the SfLListView is that it already supports the sorting,filtering and grouping OOB.


I have a Page/View where user enters serach criteria which results in multiple records, on next Page/View having SfListView.
My service would return data which conatins limited fields (ProfileId, Name, Age, ProfileImage and Education)

Now my project requirements are as under:
  • List should return 100 records at once (figured out at service level... I will request more records with pull request if possible with SfListView)
  • List should be filterable (which I guess SfListVuew is)
  • Performance - here I would like to ask if I can use any caching machanism available with SfListView or you can suggest alternatives.
  • Image Previews - Preload - lazyload options if any available with ListView.
  • Can I implement auto load more records functionality with SfListView when user has scrolled to bottom of list (or about to reach to end)
May be this is a overwhelming query, however my preoject team is about to decide the compoments to be used further in entire.
So the POCs have to have as much as, I can showcase. 

Please responed ASAP, Thanks

Regards,
Nhilesh Baua

4 Replies
DB Dinesh Babu Yadav Syncfusion Team May 20, 2017 03:10 AM UTC

Hi Nhilesh, 
  
Thank you for using Syncfusion Products. 
  
Query 
Description 
Support for PullToRefresh in SfListView 
Currently SfListView do not have support for PullToRefresh. We have already considered this as feature request and we are implementing the feature “PullToRefresh” and it will be available in our upcoming 2017 Volume 2 SP 1 release which is scheduled to be rolled out by end of this month. We will let you know once the release has been rolled out. 
Filtering in SfListView 
SfListView provides inbuilt support to filter the data by setting the Filter property. For more information about filtering the data, please refer the following UG documentation link and also we have attached the sample which illustrates you to filter the data based on the entered text in the SearchBar and you can download it from the Query 4 attached sample link. 
  
Performance about SfListView 
Currently SfListView does not use caching mechanism but it is completely developed with UI Virtualization and Item recycling concept. While scrolling, we have updated only the BindingContext of the item which improves the layout performance and scrolling performance. 
Pre-Load or Lazy load of images option in SfListView 
SfListView does not use any inbuilt preload or lazy load options for images but you can use the FFImageLoading for better recycling of images and performance improvement while scrolling. We have prepared a sample which illustrates you about working with FFImageLoading in SfListView and you can download it from the below link. 
  
  
Load More support in SfListView 
You can achieve the reported feature “Support for Load more items in SfListView” by the application level itself. In the sample, you can achieve the requirement through ScrollRowsChanged event of ScrollAxisBase in VisualContainer of SfListView. By using this event, you can find whether reached the last item in the list in SfListView based on LastBodyVisibleLineIndex property. When reaching the Last index, add the items into the observable collection. By using Reflection, get the VisualContainer from SfListView and use the same way to get ScrollAxisBase from VisualContainer as per the below code snippet.  
   
Code Example[XAML]:  
<syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" ItemSize="60">  
 <syncfusion:SfListView.FooterTemplate>  
  <DataTemplate>  
      <Grid>  
        <ActivityIndicator x:Name="activityIndicator" Color="Blue" IsRunning="True"/>  
      </Grid>  
  </DataTemplate>  
</syncfusion:SfListView.FooterTemplate>  
</syncfusion:SfListView>  
   
Code Example[C#]:  
public partial class MainPage : ContentPage  
{  
  private ContactsViewModel viewModel;  
  ScrollAxisBase scrollRows;  
  public bool isFooterLoaded;  
  VisualContainer visualContainer;  
   
  public MainPage()  
  {  
  InitializeComponent();  
   viewModel = new ContactsViewModel();  
   this.BindingContext = viewModel;  
   listView.FooterSize = 40;  
   visualContainer = listView.GetType().GetRuntimeProperties().First(p => p.Name == "VisualContainer").GetValue(listView) as VisualContainer;  
   scrollRows = visualContainer.GetType().GetRuntimeProperties().First(p => p.Name == "ScrollRows").GetValue(visualContainer) as ScrollAxisBase;  
   scrollRows.Changed += ScrollRows_Changed;  
  }  
   
  private void ScrollRows_Changed(object sender, ScrollChangedEventArgs e)  
  {  
    var lastIndex = scrollRows.LastBodyVisibleLineIndex;  
    var header = (listView.HeaderTemplate != null && !listView.IsStickyHeader) ? 1 : 0;  
    var footer = (listView.FooterTemplate != null && !listView.IsStickyFooter) ? 1 : 0;  
    var displayItemsCount = listView.DataSource.DisplayItems.Count;  
    var totalItems = displayItemsCount + header + footer;  
   
    //To stop loading when 60 items added to display items.  
    if (displayItemsCount >=60)  
    {  
      listView.FooterSize = 0;  
        return;  
    }  
   
    if ( displayItemsCount != 0)  
    {  
      if (totalItems > 0 && lastIndex == (totalItems - 1))  
      {  
        if (!isFooterLoaded)  
        {  
          viewModel.LoadMoreData();  
          isFooterLoaded = true;  
        }  
      }  
      else  
        {  
          isFooterLoaded = false;  
        }  
      }  
    }  
  }  
}  
   
public class ContactsViewModel : INotifyPropertyChanged  
{  
  bool isBusy = false;  
  private int Id = 1;  
   
  public ContactsViewModel()  
  {  
    contactsinfo = new ObservableCollection<Contacts>();  
    LoadMoreData();  
  }  
   
  public async void LoadMoreData()  
  {  
    isBusy = false;  
   
    //To show ActivityIndicator if the items are loaded in the view.   
    if (contactsinfo.Count > 0)  
      await Task.Delay(3000);  
   
    //To ignore if items are being added till delayed time.  
    if (isBusy)  
      return;  
   
    for (int i = 0; i < 20; i++)  
    {  
      Random r = new Random();  
      var contact = new Contacts();  
      contact.UserId = Id++;  
      contact.ContactName = CustomerNames[i];  
      contactsinfo.Add(contact);  
   }  
    isBusy = true;  
  }  
}  
   
For your assistance we have attached the working sample and you can download it from the link below.  
   
  
Please let us know if you require further assistance. 
  
Regards, 
Dinesh Babu Yadav 
 


NB Nhilesh Baua May 20, 2017 04:10 AM UTC

Hi Dinesh,

This is awesome, 
Thanks for your detailed explanation, I'll check the samples today, actually I am not working weekends however I can not control myself to see how things will show up.
For image loading option using FFImageLoading  plug-in is not a =n option for me, because we already tried it and I found some issues like, with Android on few instances the images wouldn't show for first time, however on the second time there will be images loaded in Xamarin ListView. (We tried almost every-bit on the code related to that, but now have parked it aside).

What I can right now see is when I updated my code from 15.20.0.33 > 15.20.0.44 sometimes the sfListView scrolling flickers momentarily. I have implemented grid in item template v/s StackLayout in earlier version, could that be an issue!? I don;t think so personally, but I am open for your views.

Anyways thanks for your great response. looking forward to implement this in our upcoming project. The race is on, only I have is the next week to check everything and submit my findings, wish me a luck. :)

Regards,
Nhilesh Baua


DB Dinesh Babu Yadav Syncfusion Team May 22, 2017 12:57 PM UTC

Hi Nhilesh, 
 
Thanks for the update. 
 
We have checked the reported issue “Flickering occurs in latest SfListView version(v15.2.0.40)” at our end. We would like to let you know that when images are loaded in SfListView, the images needs to be render from native android platform and then it gets layout. So, based on the quality of image(image size), delay gets increased to layout and load the images in view. Also, you can use any view(such as Grid, StackLayout, Frame etc., ) in the ItemTemplate and it does not affect any performance of SfListView. 
 
In the latest SfListView version (v15.2.0.40), we have provided the support for AutoFit feature, so if you have define the AutoFitMode as Height in the sample, then the fraction of delay will occur for render the item by measuring the size based on content. If you have not use the AutoFitMode, please share more details about the flickering issue with simple sample and with the replication procedure. So, that we could able to analyze the issue better and we will provide an appropriate solution. 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 


DB Dinesh Babu Yadav Syncfusion Team August 19, 2017 07:09 AM UTC

Hi Nhilesh, 
 
Apologies for the delay. 
 
The reported feature “Support for PullToRefresh” has been included in this release. We are glad to announce that our Essential Studio Volume 3, 2017 (Version 15.3.0.26) is rolled out and is available for download under the following link.  
  
                                               
We have updated “Working with PullToRefresh in SfListView” in our UG documentation and please refer the following link for more information.    
    
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  
 
Regards, 
Dinesh Babu Yadav 


Loader.
Live Chat Icon For mobile
Up arrow icon