New to Telerik UI for Xamarin? Download free 30-day trial

Sorting

RadListView can be used to sort the visualized data. This can be achieved by adding different SortDescriptors to its SortDescriptors collection. There are two types of descriptors shipped with our code.

PropertySortDescriptor

You can sort the data by a property value from the class that defines your business items. This descriptor exposes the following properties:

  • PropertyName: Defines the string name of the property that is used to retrieve the key to sort by.
  • SortOrder: Specifies sort order to Ascending or Descending.

DelegateSortDescriptor

This descriptor enables you to sort by a custom key (e.g. some complex expression combining two or more properties) instead of being limited by the value of a single property. This descriptor exposes the following properties:

  • SortOrder: Sets the sort order to Ascending or Descending.
  • Comparer: Defines the Compare method used by the internal IComparer.

Example

Here is an example that will guide you how to use SortDescriptor in ListView.

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 Sorting class:

public Sorting()
{
    InitializeComponent();
    this.BindingContext = new ViewModel();
    listView.SortDescriptors.Add(new Telerik.XamarinForms.DataControls.ListView.PropertySortDescriptor { PropertyName = "Age", SortOrder = SortOrder.Ascending });
}

Use the following snippet for 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;
    }
}

Create a class Person and add the code below:

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

Here is the result once the data is sorted.

Sorting

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

Bindable SortDescriptor

Currently the SortDescriptor of the RadListView supports binding. What's new is that now the users can control it using MVVM.

In order to control the descriptors collections through MVVM:

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

Here is the result:

SortDescriptorMVVM

An example how to create a ListView with SortDescriptor collection that can be controlled through MVVM can be found in the ListView/Bindable Collections folder of the SDK Samples Browser application.

See Also

In this article