WPF DataGrid Multiple Groups?

May 27, 2009 at 10:32 PM
Edited May 27, 2009 at 10:36 PM

Hi

I am trying to create a wpf datagrid with multiple groups as shown in the image below.

Currently I have been able to set one grouping only for example Country. But I want to be able to group at a second level like State atleast.

Is the WPF Datagrid capable of such grouping?

May 29, 2009 at 3:05 PM

How did you accomplish the Country grouping?

Thanks,

Tracy

Coordinator
Jun 3, 2009 at 1:25 PM

Taking the sample from here, http://blogs.msdn.com/vinsibal/archive/2008/10/22/wpf-datagrid-and-the-wpftoolkit-have-released.aspx.  If you take a look at DataGridBasicSample, add this line to this method and you have an additional level of grouping:

        private void OnGroupingButtonClick(object sender, RoutedEventArgs e)
        {
            // remove AlternatingRow background while grouping
            DataGrid_Standard.AlternatingRowBackground = Brushes.White;

            DataGrid_Standard.GroupStyle.Add(_defaultGroupStyle);         
            DataGrid_Standard.Items.GroupDescriptions.Add(new PropertyGroupDescription("FirstName"));
            DataGrid_Standard.Items.GroupDescriptions.Add(new PropertyGroupDescription("LastName"));
        }

 You can add as many group descriptors as you want.  Just remember that there isn't default support for grouping and virtualization.

Jun 12, 2009 at 8:18 PM
Edited Jun 17, 2009 at 5:01 PM

Cheapsaket or someone who may know,

Would you be able to post the XAML code and/or code-behind that made the wpf DataGrid display the groups horizontally like in your original posting?  One grouping is good enough.

Thanks,

annie

Jun 12, 2009 at 8:49 PM

I have the same need.  

Can you show how to have "Row" spanning like in the original post  

e.g. one merged cell for each "City", one merged cell for each Country  etc

Regards,

Tracy

Jun 18, 2009 at 3:48 AM
Edited Jun 18, 2009 at 3:51 AM

The screenshot was the requirement, created in excel and I was trying to achieve it using the datagrid. I was able to do it but with issues as noted at the end.

First you need to setup a CollectionViewSource.

Then in the datagrid, you have to specify the groupstyle where the information will be displayed.

Below is an example.

<Window
   x:Class="WPFObservableCollection.GroupingWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
   xmlns:local="clr-namespace:WPFObservableCollection"
   xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Grouping">
    <Window.Resources>
        <!-- define the method which is invoked to obtain our data -->
        <ObjectDataProvider x:Key="ppl" MethodName="GetPeople" ObjectType="{x:Type local:PeopleDataProvider}"/>

        <CollectionViewSource x:Key="cvs" Source="{Binding Source={StaticResource ppl}}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Country"/>
                <PropertyGroupDescription PropertyName="State"/>
            </CollectionViewSource.GroupDescriptions>
            <CollectionViewSource.SortDescriptions>
                <scm:SortDescription PropertyName="Country"/>
                <scm:SortDescription PropertyName="State"/>
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>
    </Window.Resources>
    <Grid>
        <dg:DataGrid
         Name="PeopleGrid"
         AutoGenerateColumns="False"
         Background="White"
         BorderThickness="0"
         GridLinesVisibility="All"
         HorizontalScrollBarVisibility="Disabled"
         ItemsSource="{Binding Source={StaticResource cvs}}"
         RowHeaderWidth="0"
         SelectionMode="Single"
         SelectionUnit="FullRow"
         VerticalGridLinesBrush="DarkGray"
         VerticalScrollBarVisibility="Disabled">
            <dg:DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <dg:DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <StackPanel Orientation="Horizontal">
                                            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                                <ContentPresenter Width="82" Content="{Binding Path=Name}"/>
                                            </Grid>
                                            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                                <ItemsPresenter/>
                                            </Grid>
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </dg:DataGrid.GroupStyle>
            <dg:DataGrid.Columns>
                <dg:DataGridTextColumn Binding="{Binding Path=City, Mode=TwoWay}" Header="City"/>
                <dg:DataGridTextColumn Binding="{Binding Path=FirstName, Mode=TwoWay}" Header="First Name"/>
                <dg:DataGridTextColumn Binding="{Binding Path=LastName, Mode=TwoWay}" Header="Last Name"/>
                <dg:DataGridTextColumn Binding="{Binding Path=id}" x:Name="id" IsReadOnly="True" Visibility="Hidden"/>
            </dg:DataGrid.Columns>
        </dg:DataGrid>
    </Grid>
</Window>
The issue I have run into subsequently is that the group cannot have their own header and the header of the rest of the columns for some reason is left justified.
If you can solve that issue, please let me know.
Dec 27, 2011 at 11:45 AM

Is anybody got solution for this issue? I am also in need of this requirement

Dec 27, 2012 at 9:43 AM

Can anyone help me with an example to achieve similar UI in silverlight 5?