1. Home
  2. Forum
  3. Xamarin.Forms
  4. Need support with Search + Scroll Automatic Load More option in SfListView

Need support with Search + Scroll Automatic Load More option in SfListView

Hi 

We have required using MVVM (prism) design where user should be able to see result in sflistview and it should auto load when scroll reaches to last record. 

Also user can search in searchBar and result should show accordingly with load more available there as well. 


Actually I tried, however on fresh load both commands (Search Command , Load More Command) are firing at once, which is not ideally I wanted. 


Regards

Pawan Shakya 


1 Reply
LN Lakshmi Natarajan Syncfusion Team June 30, 2021 06:37 AM UTC

Hi Pawan, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Need support with Search + Scroll Automatic Load More option in SfListView” from our side. We would like to inform you that the SfListView supports filtering data based on search. Also, the SfListView supports loading data on demand at run time. 
 
Please refer to the following documents for the same, 
 
Query 
Response 
We have required using MVVM (prism) design where user should be able to see result in sflistview. 
 
Also user can search in searchBar and result should show accordingly with load more available there as well. 
You can achieve your requirement using Filter predicate in SfListView.DataSource. 
 
Please refer to the following code snippets for more reference, 
 
ViewModel 
public class MainPageViewModel :INotifyPropertyChanged 
{ 
    public Command<object> SearchCommand { get; set; } 
    public DataSource ListDataSource { get; set; } 
 
    public MainPageViewModel() 
    { 
        Products = new ObservableCollection<Product>(); 
        AddProducts(0, 8); 
        ListDataSource = new DataSource(); 
        SearchCommand = new Command<object>(OnSearchCommand); 
    } 
 
    private void OnSearchCommand(object obj) 
    { 
        SearchText = obj as string; 
        if (this.ListDataSource != null) 
        { 
            this.ListDataSource.Filter = FilterContacts; 
            this.ListDataSource.RefreshFilter(); 
        } 
    } 
 
    private bool FilterContacts(object obj) 
    { 
        if (string.IsNullOrEmpty(SearchText)) 
            return true; 
 
        var product = obj as Product; 
        if (product.Name.ToLower().Contains(SearchText.ToLower()) 
                || product.Name.ToLower().Contains(SearchText.ToLower())) 
            return true; 
        else 
            return false; 
    } 
} 
 
XAML: Bind the ViewModel datasource property to SfListView.DataSource. 
<SearchBar x:Name="searchbar" 
            SearchCommand="{Binding SearchCommand}" 
            SearchCommandParameter="{Binding Path=Text, Source={x:Reference searchbar}}" 
            Placeholder="Search here" 
            HeightRequest="50"/> 
<sync:SfListView x:Name="listView"  
                    ItemSize="120" 
                    SelectionMode="Single" 
                    IsScrollBarVisible="False" 
                    IsScrollingEnabled="True" 
                    LoadMorePosition="Bottom" 
                    LoadMoreOption="Auto" 
                    LoadMoreCommand="{Binding LoadMoreItemsCommand}" 
                    ItemsSource="{Binding Products}" 
                    DataSource="{Binding ListDataSource}"> 
 
Please refer to our documentations regarding the same from the following link, 
 
And it should auto load when scroll reaches to last record. 
You can achieve your requirement by using SfListView.LoadMoreOption as Auto. 
 
Please refer to the following documentation regarding the same, 
 
Actually I tried, however on fresh load both commands (Search Command , Load More Command) are firing at once, which is not ideally I wanted. 
We would like to inform you that, when LoadMoreOption is Auto then the LoadMoreCommand will be called in the following scenarios, 
When items are less than the view size 
When reaching the end of the list 
 
We have prepared a sample based on the requirement and you can download using the following link, 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan 
 


Loader.
Up arrow icon