| Comments

I previously wrote about DataGrid grouping using the declarative model of adding GroupDescriptors.  Unfortunately that feature (the declarative part) never made it to the release of Silverlight 3.  It was pointed out to me that I should update that post and it has been on my //TODO list for a while.  Here’s an update…

First, I’m still using a sample data class of Person as my test data:

   1: using System.Collections.Generic;
   2:  
   3: namespace DataGridGroupingUpdated
   4: {
   5:     public class Person
   6:     {
   7:         public string FirstName { get; set; }
   8:         public string LastName { get; set; }
   9:         public string Gender { get; set; }
  10:         public string AgeGroup { get; set; }
  11:     }
  12:  
  13:     public class People
  14:     {
  15:         public static List<Person> GetPeople()
  16:         {
  17:             List<Person> peeps = new List<Person>();
  18:             peeps.Add(new Person() { FirstName = "Tim", LastName = "Heuer", Gender = "M", AgeGroup = "Adult" });
  19:             peeps.Add(new Person() { FirstName = "Lisa", LastName = "Heuer", Gender = "F", AgeGroup = "Adult" });
  20:             peeps.Add(new Person() { FirstName = "Zoe", LastName = "Heuer", Gender = "F", AgeGroup = "Kid" });
  21:             peeps.Add(new Person() { FirstName = "Zane", LastName = "Heuer", Gender = "M", AgeGroup = "Kid" });
  22:             return peeps;
  23:         }
  24:     }
  25: }

Then my XAML is a simple DataGrid (make sure to add assembly references to your project to System.Windows.Controls.Data):

   1: <UserControl x:Class="DataGridGroupingUpdated.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
   5:     xmlns:datacontrols="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
   6:     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
   7:     <Grid x:Name="LayoutRoot">
   8:         <StackPanel>
   9:             <StackPanel Orientation="Horizontal">
  10:                 <TextBlock Text="Group:" Margin="0,0,10,0" />
  11:                 <ComboBox x:Name="GroupNames" SelectionChanged="GroupNames_SelectionChanged">
  12:                     <ComboBox.Items>
  13:                         <ComboBoxItem Content="AgeGroup" IsSelected="True" />
  14:                         <ComboBoxItem Content="Gender" />
  15:                     </ComboBox.Items>
  16:                 </ComboBox>
  17:             </StackPanel>
  18:             <datacontrols:DataGrid x:Name="PeopleList" />
  19:         </StackPanel>
  20:     </Grid>
  21: </UserControl>

Notice the xmlns:datacontrols declaration at the top.

Now since we can’t do the grouping declaratively as in my previous sample with Silverlight 3 beta, here’s how we could do it.  In Silverlight 3 you have access to PagedCollectionView (add a reference to System.Windows.Data to get it).  This is a view that enables you to add sort and group descriptors.  In my initial loading code I instantiate a new PagedCollectionView passing in my List<Person> as the enumerable type.  I then set a default grouping on it.

   1: PagedCollectionView pcv = null;
   2:  
   3: public MainPage()
   4: {
   5:     InitializeComponent();
   6:     Loaded += new RoutedEventHandler(MainPage_Loaded);
   7: }
   8:  
   9: void MainPage_Loaded(object sender, RoutedEventArgs e)
  10: {
  11:     pcv = new PagedCollectionView(People.GetPeople());
  12:     pcv.GroupDescriptions.Add(new PropertyGroupDescription("AgeGroup"));
  13:  
  14:     PeopleList.ItemsSource = pcv;
  15: }

Then I can wire up a quick and dirty (just for demonstration purposes) ComboBox to show changing the grouping (or perhaps adding another one if you’d like):

   1: private void GroupNames_SelectionChanged(object sender, SelectionChangedEventArgs e)
   2: {
   3:     if (pcv != null)
   4:     {
   5:         // comment this next line out to see
   6:         // adding additional groupings.
   7:         pcv.GroupDescriptions.Clear();
   8:         ComboBoxItem itm = (ComboBoxItem)GroupNames.SelectedItem;
   9:         pcv.GroupDescriptions.Add(new PropertyGroupDescription(itm.Content.ToString()));
  10:     }
  11: }

You see we are just changing the PagedCollectionView and not the DataGrid.  The binding that exists between them already understands what to do – so we just have to change the data source, not the control displaying the source.  Put them all together and the running application shows the grouping:

DataGrid grouping sample image

Hopefully this helps clarify the change from SL3 beta and apologies for the delay in updating what is a common sample request.  Who knows, maybe in future versions the declarative model will come back :-).  Here’s the code for the above if you’d like to see it: DataGridGroupingUpdated.zip

| Comments

UPDATED: If you found this post via a search, the below information was for Silverlight 3 beta and no longer works in Silverlight 3 release.  Click here for an updated tutorial on grouping in the Silverlight DataGrid for Silverlight 3.

I got this question on how do you add grouping to the DataGrid in Silverlight without using the RIA Services ObjectDataSource.  Frankly I didn’t know off the top of my head either and I’ve since learned it isn’t obvious.  Allow me to explain the steps.

In my simple app I have a static class that supplies some hard-coded data:

   1: public List<Person> GetPeople()
   2: {
   3:     List<Person> peeps = new List<Person>();
   4:     peeps.Add(new Person() { FirstName = "Tim", LastName="Heuer", Gender="M", AgeGroup="Adult" });
   5:     peeps.Add(new Person() { FirstName = "Lisa", LastName="Heuer", Gender="F", AgeGroup="Adult" });
   6:     peeps.Add(new Person() { FirstName = "Zoe", LastName = "Heuer", Gender="F", AgeGroup="Kid" });
   7:     peeps.Add(new Person() { FirstName = "Zane", LastName = "Heuer", Gender="M", AgeGroup="Kid" });
   8:     return peeps;
   9: }

You can see there is a Gender field and I want to list them grouped on that in a DataGrid.  So I would first add a reference to the DataGrid control library and add that:

   1: <navigation:Page x:Class="SilverlightApplication32.AboutPage" 
   2:            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   4:            xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
   5:            xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
   6:            Title="AboutPage Page">
   7:     <Grid x:Name="LayoutRoot" Background="White">
   8:         <StackPanel>
   9:             <TextBlock Text="Detail" Style="{StaticResource HeaderTextStyle}"/>
  10:             <TextBlock Text="Detail list of members with gender." Style="{StaticResource ContentTextStyle}"/>
  11:             <data:DataGrid ItemsSource="{Binding}"/>
  12:         </StackPanel>
  13:     </Grid>
  14: </navigation:Page>

Notice the xmlns attribute in the control (this is in a navigation page, but the syntax is the same).  Now how to add the grouping?  You’d hope it would be something as simple as GroupPathName on the DataGrid or something.  But remember that grouping can be done multilevel.  So to add grouping we have to do some things first.  First, add a reference to System.ComponentModel in your application.  Then add another xmlns to your control for the library, since that is where the PropertyGroupDescription is located.  The result is that we have:

   1: <navigation:Page x:Class="SilverlightApplication32.AboutPage" 
   2:            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   4:            xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
   5:            xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
   6:            xmlns:cm="clr-namespace:System.Windows.Data;assembly=System.ComponentModel"
   7:            Title="AboutPage Page">
   8:     <Grid x:Name="LayoutRoot" Background="White">
   9:         <StackPanel>
  10:             <TextBlock Text="Detail" Style="{StaticResource HeaderTextStyle}"/>
  11:             <TextBlock Text="Detail list of members with gender." Style="{StaticResource ContentTextStyle}"/>
  12:             <data:DataGrid ItemsSource="{Binding}">
  13:                 <data:DataGrid.GroupDescriptions>
  14:                     <cm:PropertyGroupDescription PropertyName="Gender" />
  15:                 </data:DataGrid.GroupDescriptions>
  16:             </data:DataGrid>
  17:         </StackPanel>
  18:     </Grid>
  19: </navigation:Page>

Notice the ComponentModel use within the DataGrid’s GroupDescriptions node.  This would render in a UI like:

DataGrid single grouping

Want to add multilevel grouping? Just add another PropertyGroupDescription:

   1: <data:DataGrid ItemsSource="{Binding}">
   2:     <data:DataGrid.GroupDescriptions>
   3:         <cm:PropertyGroupDescription PropertyName="Gender" />
   4:         <cm:PropertyGroupDescription PropertyName="AgeGroup" />
   5:     </data:DataGrid.GroupDescriptions>
   6: </data:DataGrid>

And it will render top-down:

DataGrid multilevel grouping

You can also do this in code of course like this (assuming the DataGrid is named “MyGrid”:

   1: MyGrid.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));

I found this information on one of our tester’s site, Naga Satish.  Naga also has some other valuable DataGrid information:

I recommend you bookmark a few :-).