Posted by: Zeeshan Amjad | May 19, 2011

Applying GroupStyle in DataGrid


We already saw an example of applying GroupStyle with ListBox here and with ListView here.  We can apply the same technique with DatGrid. In first step we define the data class.

Code Snippet
public class EmployeeInfo
{
    public EmployeeInfo(int id, string name, string department)
    {
        ID = id;
        Name = name;
        Department = department;
    }

    public int ID
    { get; set; }

    public string Name
    { get; set; }

    public string Department
    { get; set; }
}

 

Then we insert some sample data in it and create group on the basis of departments. Here is a code of it.

Code Snippet
employees.Add(new EmployeeInfo(10, "Mark", "Sales"));
employees.Add(new EmployeeInfo(20, "David", "Accounts"));
employees.Add(new EmployeeInfo(30, "Alex", "Management"));
employees.Add(new EmployeeInfo(40, "Erik", "Accounts"));
employees.Add(new EmployeeInfo(50, "John", "Sales"));
employees.Add(new EmployeeInfo(60, "Scott", "Sales"));
employees.Add(new EmployeeInfo(70, "Jake", "Sales"));
employees.Add(new EmployeeInfo(80, "Bill", "Management"));
employees.Add(new EmployeeInfo(90, "Chris", "Accounts"));

dataGrid.ItemsSource = employees;

 

Now come to the XAML side. Here is a code to define our control template.

Code Snippet
<GroupStyle>
    <GroupStyle.ContainerStyle>
        <Style TargetType="GroupItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <StackPanel>
                            <TextBlock FontWeight="Bold" Foreground="Blue" FontSize="16"
                                      TextAlignment="Center" Text="{Binding Path=Name}"/>
                            <ItemsPresenter/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupStyle.ContainerStyle>
</GroupStyle>

 

The important thing here is we define one stack panel and display heading of the group there. To display data in a list grid view style, we simply uses ItemsPresenter. Here is complete XAML code of our program.

Code Snippet
<Window x:Class="WpfItemTemplateSelector.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="DataTemplateSelector" Height="350" Width="525">
    <Grid>
        <DataGrid Name="dataGrid">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <StackPanel>
                                            <TextBlock FontWeight="Bold" Foreground="Blue" FontSize="16"
                                                      TextAlignment="Center" Text="{Binding Path=Name}"/>
                                            <ItemsPresenter/>
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Window>

 

And here is complete C# code of the program.

Code Snippet
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace WpfItemTemplateSelector
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<EmployeeInfo> employees = new ObservableCollection<EmployeeInfo>();

        public MainWindow()
        {
            InitializeComponent();

            employees.Add(new EmployeeInfo(10, "Mark", "Sales"));
            employees.Add(new EmployeeInfo(20, "David", "Accounts"));
            employees.Add(new EmployeeInfo(30, "Alex", "Management"));
            employees.Add(new EmployeeInfo(40, "Erik", "Accounts"));
            employees.Add(new EmployeeInfo(50, "John", "Sales"));
            employees.Add(new EmployeeInfo(60, "Scott", "Sales"));
            employees.Add(new EmployeeInfo(70, "Jake", "Sales"));
            employees.Add(new EmployeeInfo(80, "Bill", "Management"));
            employees.Add(new EmployeeInfo(90, "Chris", "Accounts"));

            dataGrid.ItemsSource = employees;

            CollectionView cv = (CollectionView)CollectionViewSource.GetDefaultView(dataGrid.ItemsSource);
            PropertyGroupDescription pgd = new PropertyGroupDescription("Department");
            cv.GroupDescriptions.Add(pgd);
        }
    }

    public class EmployeeInfo
    {
        public EmployeeInfo(int id, string name, string department)
        {
            ID = id;
            Name = name;
            Department = department;
        }

        public int ID
        { get; set; }

        public string Name
        { get; set; }

        public string Department
        { get; set; }
    }
}

 

The important difference between this program and list view is that we an edit the data here. If we change the data then it will automatically reassign it into different group and even create a new group. Here is the output of this program.

DataGridGroupOutput_01

 

Now if we change the department of any record to anything else, such as procurement, then it will create a new group of it. Here is an output of it.

DataGridGroupOutput_02

Advertisements

Responses

  1. Great article.
    One remark, de group headers do not appear. Did I miss something?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: