Grouping data in Silverlight DataGrid
| Comments- | Posted in
- silverlight
- xaml
- ria
- datagrid
- riaservices
- grouping
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:
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:
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 :-).
Please enjoy some of these other recent posts...
Comments