Filtering in Xamarin ListView (SfListView)

9 Aug 20236 minutes to read

This section explains how to filter the data and its related operations in the SfListView.

Programmatic filtering

The SfListView supports to filter the data by setting the SfListView.DataSource.Filter property. You have to call the SfListView.DataSource.RefreshFilter() method after assigning the Filter property for refreshing the view.

The FilterChanged event is raised once filtering is applied to the SfListView.

The FilterContacts method filters the data contains the filter text value. Assign FilterContacts method to SfListView.DataSource.Filter predicate to filter the ContactName. To apply filtering in the SfListView, follow the code example:

XAML

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
 <Grid>
	 <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
      <SearchBar x:Name="filterText" HeightRequest="40"
           Placeholder="Search here to filter"
           TextChanged="OnFilterTextChanged" Grid.Row="0"/>
      <syncfusion:SfListView x:Name="listView" Grid.Row="1" ItemSize="60" ItemsSource="{Binding customerDetails}"/>
  </Grid>
</ContentPage>

C#

var grid = new Grid();

var searchBar = new SearchBar() { Placeholder = "Search here to filter" };
searchBar.TextChanged += OnFilterTextChanged;

var listView = new SfListView();
listView.ItemsSource = viewModel.customerDetails;
listView.ItemSize = 60;

grid.Children.Add(searchBar);
grid.Children.Add(listView, 0, 1);

The following code example illustrates code for filtering the data using FilterContacts method in the ViewModel:

C#

SearchBar searchBar = null;
private void OnFilterTextChanged(object sender, TextChangedEventArgs e)
{
  searchBar = (sender as SearchBar);
  if (listView.DataSource != null)
  {
    this.listView.DataSource.Filter = FilterContacts;
    this.listView.DataSource.RefreshFilter();
  }
}
 
private bool FilterContacts(object obj)
{
  if (searchBar == null || searchBar.Text == null)
     return true;

  var contacts = obj as Contacts;
  if (contacts.ContactName.ToLower().Contains(searchBar.Text.ToLower())
       || contacts.ContactName.ToLower().Contains(searchBar.Text.ToLower()))
      return true;
  else
      return false;
}

Download the entire source code from GitHub here

The following screenshot shows the output rendered when the items are filtered:

Filter based on multiple criteria

The SfListView allows filtering the items based on multiple criteria. To filter the data using multiple properties, follow the code example:

C#

private bool FilterContacts(object obj)
{
  if (searchBar == null || searchBar.Text == null)
     return true;

  var contacts = obj as Contacts;
  if (contacts.ContactName.ToLower().Contains(searchBar.Text.ToLower())
      || contacts.ContactNumber.ToLower().Contains(searchBar.Text.ToLower()))
      return true;
  else
      return false;
}

Getting the filtered data

You can get filtered items from the view and modify it in the SfListView.DataSource.FilterChanged event. When filter is applied, the filtered items are available in the SfListView.DataSource.DisplayItems.

C#

listView.DataSource.FilterChanged += DataSource_FilterChanged;
...
private void DataSource_FilterChanged(object sender, NotifyCollectionChangedEventArgs e)
{
  //Contacts is model class 
  ObservableCollection<Contacts> contacts = new ObservableCollection<Contacts>();
  // Get the filtered items
  var items = (sender as DataSource).DisplayItems;
  foreach (var item in items)
      contacts.Add(item as Contacts);
}

Clear filtering

The SfListView allows clearing the filters by setting the DataSource.Filter to null, and call the DataSource.RefreshFilter method.

C#

listView.DataSource.Filter = null;
listView.DataSource.RefreshFilter();

Sort the filtered items

The order of the filtered items can be rearranged in the FilterChanged event by adding SortDescriptor. To sort the filtered items, follow the code example:

C#

private void DataSource_FilterChanged(object sender, NotifyCollectionChangedEventArgs e)
{
  listView.DataSource.SortDescriptors.Add(new SortDescriptor { PropertyName = "ContactName", 
                                                               Direction = ListSortDirection.Ascending });
  listView.RefreshView();
}

NOTE

You can refer to our Xamarin ListView feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms ListView example to know how to render set of data items with Xamarin.Forms views or custom templates.

See also

How to filter Xamarin.Forms ListView (SfListView) using MVVM