Edit this page

How to group items

In RadListBox you can easily group the items based on their properties with the help of CollectionViewSource and GroupStyle. This grouping feature not only provides a nice visualization of the items, but using the GroupStyle, you can easily customize the groups.

The following example will demonstrate how to bind the ItemsSource property of RadListBox to a CollectionViewSource of custom objects grouped by one of their properties. In order for the scrolling of the grouped items to be possible, you must set the IsScrollIntoViewEnabled property to "False".

The IsScrollIntoViewEnabled was introduced with SP1 Q3 2015 and determines whether the selected item will automatically be scrolled into the view. When it is set to True (this is the default value) and an item gets selected, the item is brought into view by scrolling to it. Because that behavior is not expected when grouping is used, the property needs to be set to False – thus it will be allowed the selection of an item in a group without the need of scrolling to that group.<>

In the example below, you create a new business object named Item. The implementation of the class is presented below:

Business object Item

public class Item
{
    public string Group { get; set; }
    public string Name { get; set; }
}
Public Class Item
        Public Property Group() As String
        Public Property Name() As String
    End Class

Next, you create a new class named ViewModel – inside it you need to initialize two collections. The first collection will be used as a source for the CollectionViewSource while the second one will be the CollectionViewSource itself:

ViewModel creation

public ObservableCollection<Item> Collection { get; set; }
public CollectionViewSource CollectionView { get; set; }
public ViewModel()
{
    this.Collection = new ObservableCollection<Item>
    {
        new Item { Group = "GroupA", Name = "Item 1" },
        new Item { Group = "GroupA", Name = "Item 2" },
        new Item { Group = "GroupA", Name = "Item 3" },
        new Item { Group = "GroupA", Name = "Item 4" },
        new Item { Group = "GroupA", Name = "Item 5" },
        new Item { Group = "GroupA", Name = "Item 6" },
        new Item { Group = "GroupB", Name = "Item 1" },
        new Item { Group = "GroupB", Name = "Item 2" },
        new Item { Group = "GroupB", Name = "Item 3" }
    };
    var view = new CollectionViewSource();
    view.GroupDescriptions.Add(new PropertyGroupDescription("Group"));
    view.Source = Collection;
    CollectionView = view;
}
Public Property Collection() As ObservableCollection(Of Item)
Public Property CollectionView() As CollectionViewSource
Public Sub New()
    Me.Collection = New ObservableCollection(Of Item) From {
        New Item With {.Group = "GroupA", .Name = "Item 1"},
        New Item With {.Group = "GroupA", .Name = "Item 2"},
        New Item With {.Group = "GroupA", .Name = "Item 3"},
        New Item With {.Group = "GroupA", .Name = "Item 4"},
        New Item With {.Group = "GroupA", .Name = "Item 5"},
        New Item With {.Group = "GroupA", .Name = "Item 6"},
        New Item With {.Group = "GroupB", .Name = "Item 1"},
        New Item With {.Group = "GroupB", .Name = "Item 2"},
        New Item With {.Group = "GroupB", .Name = "Item 3"}
    }
    Dim view = New CollectionViewSource()
    view.GroupDescriptions.Add(New PropertyGroupDescription("Group"))
    view.Source = Collection
    CollectionView = view
End Sub

Next, you should declare the ViewModel as DataContext in your XAML:

Set the ViewModel as DataContext

<UserControl.DataContext>
    <local:ViewModel/>
</UserControl.DataContext>

Finally, all you need to do is to set the ItemsSource and GroupStyle properties:

Set the ItemsSource and GroupStyle

<telerik:RadListBox x:Name="radlistbox" IsScrollIntoViewEnabled="False"
                        ItemsSource="{Binding CollectionView.View}"  
                        DisplayMemberPath="Name">
    <telerik:RadListBox.GroupStyle>
        <GroupStyle/>
    </telerik:RadListBox.GroupStyle>
</telerik:RadListBox>

The final result is shown on the snapshot below:

radlistbox-how-to-group-items-1