Grouping

RadListView provides you with the functionality to programmatically group its data at runtime. This can be achieved through adding groupdescriptors to the RadListView.GroupDescriptors collection.

In addition, the control supports groups expand and collapse operations either through the UI by tapping on the group headers or programmatically. For more details on this refer to Expand and Collapse Groups.

PropertyGroupDescriptor

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

  • PropertyName: Defines the string name of the property you want to group by.
  • SortOrder: Defines the sort order in each group to Ascending or Descending.

Let's, for example, have the following business object:

public class City
{     
    public string Name { get; set; }
    public string Country { get; set; }
}

and a ViewModel with a collection of Cities:

public class ViewModel
{
    public ObservableCollection<City> Cities { get; set; }

    public ViewModel()
    {
        this.Cities = new ObservableCollection<City>()
        {
            new City() { Name = "Barcelona", Country = "Spain"},
            new City() { Name = "Madrid", Country = "Spain"},
            new City() { Name = "Rome", Country = "Italy"},
            new City() { Name = "Florence", Country = "Italy"},
            new City() { Name = "London", Country = "England"},
            new City() { Name = "Manchester", Country = "England"},
            new City() { Name = "New York", Country = "USA"},
            new City() { Name = "Boston", Country = "USA"}
         };
    }
}

Next snippet demonstrates how you could group the Cities by "Country" property through the PropertyGroupDescriptor:

<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding Cities}"
                     ItemTemplate="{StaticResource ListViewItemTemplate}"
                     GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}">
    <telerikDataControls:RadListView.GroupDescriptors>
        <telerikListView:PropertyGroupDescriptor PropertyName="Country"/>
    </telerikDataControls:RadListView.GroupDescriptors>
</telerikDataControls:RadListView>

In addition, you could create custom ListView ItemTemplate as well as GroupHeaderTemplate in order to achieve the desired look, the next snippet shows the previously referenced DataTemplates:

<ResourceDictionary>
    <DataTemplate x:Key="ListViewItemTemplate">
        <telerikListView:ListViewTemplateCell>
            <telerikListView:ListViewTemplateCell.View>
                <Grid Padding="16, 0, 0, 0" BackgroundColor="#F1F2F5">
                    <Label Text="{Binding Name}" TextColor="#6F6F70" FontSize="Small" />
                </Grid>
            </telerikListView:ListViewTemplateCell.View>
        </telerikListView:ListViewTemplateCell>
    </DataTemplate>
    <DataTemplate x:Key="ListViewGroupHeaderTemplate">
        <Grid BackgroundColor="#f1f2f5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Text="&#x25B8;" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium">
                <Label.Triggers>
                    <DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
                        <Setter Property="Text" Value="&#x25BE;" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
            <Label Margin="0, 12, 0, 6" Text="{Binding }" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
        </Grid>
    </DataTemplate>
</ResourceDictionary>

All that is left is to set the ViewModel as BindingContext of the control:

listView.BindingContext = new ViewModel();

Figure 1: ListView grouped through PropertyGroupDescriptor

ListView Grouping

DelegateGroupDescriptor

This descriptor enables you to group 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:

  • KeyExtractor: Defines the (Func<object, object) delegate which returns the property to retrieve the group key for each data item.
  • SortOrder: Defines the sort order in each group to Ascending or Descending.

Let's use the same example from the previous section, just add DelegateGroupDescriptor through code instead.

Next snippet shows how the ListView instance is defined:

<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding Cities}"
                                 ItemTemplate="{StaticResource ListViewItemTemplate}"
                                 GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}">               
</telerikDataControls:RadListView>

And you could create and apply a delegate for grouping the items (for example by their first letter) as following:

public DelegateGroupDescriptorGroups()
{
    InitializeComponent();
    listView.BindingContext = new ViewModel();

    var delegateDescriptor = new DelegateGroupDescriptor
    {
        KeyExtractor = FirstLetterKeyExtractor
    };

    listView.GroupDescriptors.Add(delegateDescriptor);
}

private object FirstLetterKeyExtractor(object arg)
{
    var item = arg as City;
    return item?.Name.Substring(0, 1);
}

Figure 2: ListView grouped through DelegateGroupDescriptor

ListView Grouping

See Also

Filtering

Sorting

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

Give article feedback

Tell us how we can improve this article

close
Dummy