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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


    xmlns:x="http://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;



 datagridgrouping


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


Comments (14)
  1. vplusplus says:

    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.

  2. satish says:

    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.

  3. Kevin Neville says:

    been trying to figure out for the last three hours how to have the grouping collapsed by default..

  4. Satish says:

    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);

               }

  5. Steve says:

    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

  6. Rachida Dukes says:

    Very nice tutorial. Is it possible to get the source code?

    Thnaks,

    Rachida Dukes

  7. Simon says:

    Nice tutorial but how do count the items?

    e.g. Department HR x items

    Could you please explain this?

  8. Simon Pucher says:

    Hi again,

    I just saw the solution in the documenation.

    This is the solution:

    "{Binding Path=ItemCount}"

  9. Tobby says:

    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.

  10. samcov says:

    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.

  11. Adam Wise says:

    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?

  12. tom says:

    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!

  13. Mac says:

    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?

Comments are closed.

Skip to main content