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

Grouping

RadCardView supports grouping via the UI or in code, in case you are using ICollectionView as the ItemsSource.

Figure 1: RadCardView groups

The control internally works with a QueryableCollectionView instance. If you set the ItemsSource of the RadCardView that is not a QueryableCollectionView, then the original collection is wrapped in a QueryableCollectionView instance. This way grouping is supported even if you use a more basic IEnumerable implementation, like List<T> or ObservableCollection<T>.

Grouping in the UI

The data items can be grouped by dragging a data field descriptor from the data field descriptors list to the group panel area.

Figure 2: Dragging data field descriptor

Figure 3: Grouped RadCardView

The RadCardView groups support sorting by clicking onto the associated group member button. To disable this, set the CanUserSortGroups property to False.

Example 1: Setting the CanUserSortGroups property

<telerik:RadCardView CanUserSortGroups="False" /> 
Additionally, the grouping can be disabled per CardDataFieldDescriptor by setting its AllowGrouping property.

Programmatic Grouping

The following example shows how to setup RadCardView, populate it a QueryableCollectionView and add GroupDescriptors in code.

Example 2: Defining the model

public class CardInfo 
{ 
    public string Header { get; set; } 
    public string Name { get; set; } 
    public int Number { get; set; } 
    public string Category { get; set; } 
} 
 
public class MainViewModel 
{ 
    public ObservableCollection<CardInfo> Items { get; private set; } 
    public QueryableCollectionView CollectionView { get; private set; } 
 
    public MainViewModel() 
    { 
        int counter = 0; 
        Items = new ObservableCollection<CardInfo>(); 
        for (int g = 0; g < 3; g++) 
        { 
            for (int i = 0; i < 6; i++) 
            { 
                Items.Add(new CardInfo() 
                { 
                    Header = "Card " + counter, 
                    Name = "Name " + counter, 
                    Number = counter, 
                    Category = "Category " + g 
                }); 
                counter++; 
            } 
        } 
 
        CollectionView = new QueryableCollectionView(Items); 
        CollectionView.GroupDescriptors.Add(new GroupDescriptor() { Member = "Category" }); 
    } 
} 

Read the QueryableCollectionView to see how to use the GroupDescriptors collection of the QueryableCollectionView.

Example 3: Setting the DataContext

public MainWindow() 
{ 
    InitializeComponent(); 
    this.DataContext = new MainViewModel(); 
} 

Example 4: Setting up the view

<telerik:RadCardView ItemsSource="{Binding CollectionView}" CardHeaderBinding="{Binding Header}" /> 

Events

The grouping operations invoke several events that can be used to customize the grouping. Read more in the Events article.

Customizing Grouping UI

The group panel area can be customized using several public properties. To hide the area, set the ShowGroupPanel property to False. Read more in the Customizing Groups article.

Example 5: Setting the ShowGroupPanel property

<telerik:RadCardView ShowGroupPanel="False" /> 

See Also

In this article
Not finding the help you need? Improve this article