Filtering

RadListView provides you with the functionality to programmatically filter its data at runtime. This can be achieved through adding filter descriptors that implement the IFilter interface to the RadListView.FilterDescriptors collection. You can use our DelegateFilterDescriptor implementation.

DelegateFilterDescriptor

  • Filter: Defines the function used to check whether a data item passes the filter or not.

Example

First, define the ListView in XAML:

<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding Items}">
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Name:"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text=", Age:"/>
                        <Label Text="{Binding Age}"/>
                    </StackLayout>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

Add the following code to the Filtering class:

public Filtering()
{
    InitializeComponent();
    this.BindingContext = new ViewModel();
    listView.FilterDescriptors.Add(new Telerik.XamarinForms.DataControls.ListView.DelegateFilterDescriptor { Filter = this.AgeFilter });
}
private bool AgeFilter(object arg)
{
    var age = ((Item)arg).Age;
    return age >= 25 && age <= 35;
}

Here is the ViewModel class:

public class ViewModel
{
    public ViewModel()
    {
        this.Items = GetData();
    }

    public ObservableCollection<Item> Items { get; set; }

    private static ObservableCollection<Item> GetData()
    {
        var items = new ObservableCollection<Item>();

        items.Add(new Item { Name = "Tom", Age = 41 });
        items.Add(new Item { Name = "Anna", Age = 32 });
        items.Add(new Item { Name = "Peter", Age = 28});
        items.Add(new Item { Name = "Teodor", Age = 39});
        items.Add(new Item { Name = "Lorenzo", Age = 25 });
        items.Add(new Item { Name = "Andrea", Age = 33});
        items.Add(new Item { Name = "Martin", Age = 36 });
        items.Add(new Item { Name = "Alexander", Age = 29});
        items.Add(new Item { Name = "Maria", Age = 22 });
        items.Add(new Item { Name = "Elena", Age = 27 });
        items.Add(new Item { Name = "Stefano", Age = 44 });
        items.Add(new Item { Name = "Jake", Age = 31 });
        items.Add(new Item { Name = "Leon", Age = 28 });

        return items;
    }
}

And here is the data class:

public class Item
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Here is the result after the data is filtered:

Filtering

A sample example how to create ListView with FilterDescriptor can be found in the ListView/Features folder of the SDK Samples Browser application.

Bindable FilterDescriptor

The RadListView control supports binding. What's new is that now the users can control the FilerDescriptor collection through MVVM.

In order to control the FilterDescriptor collection through MVVM:

  1. Create a property of type ObservableCollection in your ViewModel which will contain the needed filters:
public ObservableCollection<FilterDescriptorBase> FilterDescriptors
{
    get
    {
        return this.filterDescriptors;
    }
    set
    {
        if (this.filterDescriptors != value)
        {
            this.filterDescriptors = value;
            OnPropertyChanged();
        }
    }
}
  1. Use OneWayToSource binding mode to bind that property to the FilterDescriptors property of RadListView:
<telerikDataControls:RadListView x:Name="listView" Grid.Row="1" 
                                 FilterDescriptors="{Binding FilterDescriptors, 
                                 Mode=OneWayToSource}" 
                                 ItemsSource="{Binding Items}">

Here is how this looks like:

FilterDescriptorsMVVM

SDK Samples Browser application contais an example that shows FilterDescriptor collection in ListView controlled through MVVM.

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy