How To Grouping Data In WPF DataGrid

Question

In my WPF Application i'm having datagrid in this datagrid i want to grouping up data from database based on column name called "City" ,i'm not using mvvm architecture and list method,I'm Using ICollectionView and passed datatable object as a parameter,This is my c# code

ICollectionView cv = CollectionViewSource.GetDefaultView(dt);
                cv.GroupDescriptions.Add(newPropertyGroupDescription("City"));
                Hotels.ItemsSource = cv;

And This is my XAML Code:

<Window.Resources>
        <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <StackPanel>
                            <TextBlock Text="{Binding City}" Name="grouping" Foreground="Black"></TextBlock>
                            <ItemsPresenter/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

<DataGrid Background="Azure" ItemsSource="{Binding Hotels}" CanUserAddRows="False" Name="Hotels" Style="{StaticResource AzureDataGrid}" Margin="0,173,0,0">
            <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource ResourceKey=GroupHeaderStyle}">
                    <GroupStyle.Panel>                        
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>

It does not display text in textblock i'm binding Textblock with column name but it does't works...Please help me

Jacek Jacek · Accepted Answer · 2017-06-21T13:28:56

If you don't use viewmodel for each item, but DataTable's row object, WPF can't recognize the name "City". You need to use group's name which is held by CollectionViewGroupInternal.Name property of object representing a group item. In this particular scenario it's the name of the city. Just bind Name to your TextBlock.

You can achieve your goal in less lines of code using group's HeaderTemplate. Default ItemPresenter will be visible below the Header.

<!-- resources -->
<CollectionViewSource x:Key="devicesCollection" IsLiveSortingRequested="True" IsLiveGroupingRequested="True" Source="{Binding MyCollection}">
    <!-- Sorting -->
    <CollectionViewSource.SortDescriptions>
        <componentModel:SortDescription PropertyName="Id" />
    </CollectionViewSource.SortDescriptions>

    <!-- Grouping -->
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="City"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

<DataTemplate x:Key="GroupingHeader">
    <Border Background="Gray">
        <TextBlock Margin="10 5 5 5" FontSize="12" FontWeight="Bold" Text="{Binding Name}"/>
    </Border>
</DataTemplate>

<!-- data grid -->
<DataGrid ItemsSource="{Binding Source={StaticResource ResourceKey=devicesCollection}, Mode=OneWay}">
    <DataGrid.GroupStyle>
        <GroupStyle HeaderTemplate="{StaticResource ResourceKey=GroupingHeader}" />
    </DataGrid.GroupStyle>
</DataGrid>

How To Grouping Data In WPF DataGrid

1 Answers