Grouping in Silverlight DataGrid

Silverlight 3 Beta has got a very good response at Mix 09 conference. There have been some additions to datagrid since Silverlight 2 RTW. One of them is support for Grouping – developers can specify columns by which they want to group by.

The Group definitions can be added through XAML as well as through Code.

Adding Group Definitions through xaml

<UserControl x:Class="GroupingQuickStart.MainPage"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns:compmod="clr-namespace:System.Windows.Data;assembly=System.ComponentModel"

Width="700" Height="700">

<Grid x:Name="LayoutRoot" Background="White">

<data:DataGrid x:Name="dg" >

<data:DataGrid.GroupDescriptions>

<compmod:PropertyGroupDescription PropertyName="Department" />

<compmod:PropertyGroupDescription PropertyName="City" />

</data:DataGrid.GroupDescriptions>

</data:DataGrid>

</Grid>

</UserControl>

In the above example we are grouping data on “Department” column and then by "City" column. PropertyGroupDescription class in the System.Widows.Data namespace of System.ComponentModel assembly takes care of this.

Before, we see how we add grouping through code, we should make a note of PagedCollectionView class. This implements the IPagedCollectionView interface and allows grouping, sorting, etc… on the data collection. The most common way of populating data in a pagedcollectionview class is through a collection object like list that implements IEnumerable

Adding Group Descriptions through Code

We can add grouping through code in two ways

Defining group descriptions on the PagedCollectionView

PagedCollectionView collectionView = new PagedCollectionView(PopulateData(100));

collectionView.GroupDescriptions.Add(new PropertyGroupDescription("Department"));

collectionView.GroupDescriptions.Add(new PropertyGroupDescription("City"));

dg.ItemsSource = collectionView;

Defining group descriptions on the datagrid

List<Employee> list = PopulateData(100);

dg.GroupDescriptions.Add(new PropertyGroupDescription("Department"));

dg.GroupDescriptions.Add(new PropertyGroupDescription("City"));

dg.ItemsSource = list;

PopulateData method that I used in the above code snippet populates a list collection with Employee Class objects. The Employee class implements INotifyPropertyChanged and exposes the following properties

public String FirstName;

public String LastName;

public String City;

public String Department;

public String State;

Hooking up these code pieces together and building the application and running it will show us groups in datagrid.

Comments

• Anonymous
  March 21, 2009
  PingBack from http://www.anith.com/?p=21555

• Anonymous
  March 22, 2009
  Can we define a PagedCollectionView in markup (xaml) and connect it to DataGrid? Ideally would like to:

1. Define a data source using markup
2. Define a paged collection view in markup; connect it to data source using element binding
3. Define a data pager and connect it to paged collection view using element binding.
4. Define a DataGrid and connect it to paged collection view using element binding. Looks like we are getting there, or it might already be possible with SL3 Beta bits.

• Anonymous
  March 24, 2009
  we cannot define a PagedCollectionView as is xaml; We can define it in code and connect it to a Datagrid either defined in code or in xaml.

• Anonymous
  March 26, 2009
  been trying to figure out for the last three hours how to have the grouping collapsed by default..

• Anonymous
  March 26, 2009
  CollapseRowGroup method of DataGrid enables us to do this. Here is a code snippet            for (int i = 0; i < collectionView.Groups.Count; i++)            {                dg.CollapseRowGroup(collectionView.Groups[i] as CollectionViewGroup, true);            }

• Anonymous
  April 03, 2009
  Hi, great heads up on a cool new feature. I had a couple of questions:

1. Is it possible to control the display text for a group? For example, the "Department" field may be called something else, QKT45 for example in the result sets. We would have to tell the grouping to use that item, QKT45. Can we tell it to use the text "Department" by the arrows in the group headings?
2. Is there a built in way to do summary information? For example say one of the columns below the Department was a dollar amount. Could the Department group heading be set to show the sum of the dollars below it? Thank you

• Anonymous
  April 05, 2009
  Very nice tutorial. Is it possible to get the source code? Thnaks, Rachida Dukes

• Anonymous
  May 11, 2009
  Nice tutorial but how do count the items? e.g. Department HR x items Could you please explain this?

• Anonymous
  May 11, 2009
  Hi again, I just saw the solution in the documenation. This is the solution: "{Binding Path=ItemCount}"

• Anonymous
  May 27, 2009
  Nice tutorial, but I need to know if there's a way to change the group's header. Considering the name coming from the class may not be entirely user friendly.

• Anonymous
  May 31, 2009
  You should ALWAYS include a solution when you post things like this, unless you aren't testing what you write about. It has been reported that the GroupDescriptions on the datagrid are LOST when the itemsource is changed.   This makes it very difficult to use in paged situations.

• Anonymous
  July 13, 2009
  It looks like the XAML syntax for grouping is no longer valid (?)  As of Silverlight 3 RTW, it seems we need to use the code version?

• Anonymous
  October 26, 2011
  I would like to change this default title "of 7 items" to something like " of 7 computers" or " of 7 power outages records". or " of 7 persons". Please advise!

• Anonymous
  May 29, 2014
  Hi satish, I am using PagedCollectionView for Grouping and having 3 Groupdescription defined for my DataGrid. I need to alter the GroupDescription for particular Rows in my DataGrid. Is it possible?