Silverlight Feeds - All your Silverlight feeds in one place.

Sponsors

Thursday, April 09, 2009

Grouping data in Silverlight DataGrid

by Tim Heuer via Method ~ of ~ failed by Tim Heuer on 4/9/2009 4:49:01 AM

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 :-).


This work is licensed under a Creative Commons Attribution By license.


email it!bookmark it!digg it!

Original Post: Grouping data in Silverlight DataGrid

Subscribe

New Feed

Product Spotlight

Recently Updated Sources

Legal Note

The content of the postings is owned by the respective author. Silverlight Feeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on Silverlight Feeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.

Advertise with us