group-items.md

title	page_title	description	slug	tags	published	position
Grouping	Grouping	Check our "How to group items" documentation article for the RadListBox {{ site.framework_name }} control.	radlistbox-how-to-group-items	how,to,group,items	true	6

Grouping

The ListBox component allows you to easily group the items with the help of a CollectionViewSource object and the GroupStyle property of the control. The grouping feature not only provides a nice visualization of the items, but using the group style, you can easily customize the groups.

In order for the scrolling of the grouped items to be possible, you must set the IsScrollIntoViewEnabled property to false. The property 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 (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.

The following example demonstrates how to bind the ItemsSource property of RadListBox to a CollectionViewSource with custom objects grouped by one of their properties.

1. Create a model for the items.

   [C#] Business object Item

   {{region cs-radlistbox-how-to-group-items-0}} public class Item { public string Group { get; set; } public string Name { get; set; } } {{endregion}}

   [VB.NET] Business object Item

   {{region vb-radlistbox-how-to-group-items-0}} Public Class Item Public Property Group() As String Public Property Name() As String End Class {{endregion}}

2. Create a view model class holding the data and setup the CollectionViewSource.

   [C#] ViewModel creation

   {{region cs-radlistbox-how-to-group-items-1}} public ObservableCollection Collection { get; set; } public CollectionViewSource CollectionView { get; set; } public ViewModel() { this.Collection = new ObservableCollection { 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; } {{endregion}}

   [VB.NET] ViewModel creation

   {{region vb-radlistbox-how-to-group-items-1}} 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 {{endregion}}

3. Create a new instance of the view model and assign it to the DataContext of the view.

   [XAML] Set the ViewModel as DataContext

   {{region xaml-radlistbox-how-to-group-items-0}} <UserControl.DataContext> local:ViewModel/ </UserControl.DataContext> {{endregion}}

4. Assign the ItemsSource and GroupStyle properties.

   [XAML] Set the ItemsSource and GroupStyle

   {{region xaml-radlistbox-how-to-group-items-1}} <telerik:RadListBox x:Name="radlistbox" IsScrollIntoViewEnabled="False" ItemsSource="{Binding CollectionView.View}"
   DisplayMemberPath="Name"> telerik:RadListBox.GroupStyle </telerik:RadListBox.GroupStyle> </telerik:RadListBox> {{endregion}}

RadListBox with grouping enabled

See Also

{% if site.framework_name == 'WPF' %}

• [Get Started with UI for WPF]({%slug getting-started-first-steps%}) {% endif %}