Telerik WPF RadGridView Group Header Template customization with ViewModel data

Tools required to execute below sample on your computer
- Visual Studio
- Telerik UI for WPF

Follow the below steps to reproduce this sample
- Create a new WPF Project with Telerik GridView references.
- Create ObjectModel.cs file (Model).
- Create MainWindow.xaml with Codebehind (View).  Note: This comes with WPF Project Visual Sudio Template.
- Create MainWindowViewModel class (ViewModel).

ObjectModel.cs file will contain following classes:

   
   public class CustomerOrder  
   {  
     public Guid    CustomerId { get; set; }  
     public string  FirstName { get; set; }  
     public string  LastName { get; set; }  
     public string  Email { get; set; }  
     public string  PhoneNumber { get; set; }  
     public int     OrderType { get; set; }  
     public int     OrderCost { get; set; }  
   }  
   public class CustomerOrderGrouRow  
   {  
     public CustomerOrderGrouRow()  
     {  
       OrderTypeName = string.Empty;  
     }  
     public Guid   CustomerId { get; set; }  
     public int    OrdersCount { get; set; }  
     public int    OrderType { get; set; }  
     public string OrderTypeName { get; set; }  
     public int    OrderCost { get; set; }  
   }  
   public enum OrderTypes  
   {  
     groceries = 1,  
     Books = 2,  
     Clothes = 3  
   } 

Create MainWindowViewModel with Order Items Observable Collection and fill with some test data. follow the below code

   
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection OrderItems { get; private set; }

        public MainWindowViewModel()
        {
            var orders = new List
            {
                new CustomerOrder { Email = "Test1@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 1" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 1},
                new CustomerOrder { Email = "Test2@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 2" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 1},
                new CustomerOrder { Email = "Test3@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 3" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 1},
                new CustomerOrder { Email = "Test4@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 4" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 2},
                new CustomerOrder { Email = "Test5@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 5" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 2},
                new CustomerOrder { Email = "Test6@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 6" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 2},
                new CustomerOrder { Email = "Test7@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 7" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 2},
                new CustomerOrder { Email = "Test8@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 8" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 3},
                new CustomerOrder { Email = "Test9@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 9" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 3},
                new CustomerOrder { Email = "Test10@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 10" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 3},
                new CustomerOrder { Email = "Test11@ViewModel.com", PhoneNumber = "1234567890", FirstName = "First Name 11" , LastName = "Last Name 1", CustomerId = Guid.NewGuid(), OrderCost = 95, OrderType = 3},
            };

            var groupOrders = orders
                .GroupBy(i => i.OrderType)
                .Select(i => new CustomerOrderGrouRow
                {
                    OrderType = i.Key,
                    OrdersCount = i.Count(),
                    OrderCost = i.Sum(x => x.OrderCost),
                    CustomerId = i.First().CustomerId,
                    OrderTypeName = GetOrderTypeName(i.Key)
                })
                .ToList();

            var orderItemViewModels = orders
                .Select(i => new CustomerOrderViewModel(i, groupOrders.First(x => x.OrderType == i.OrderType)))
                .ToList();

            OrderItems = new ObservableCollection(orderItemViewModels);
        }

        public string GetOrderTypeName(int orderTypeId)
        {
            switch (orderTypeId)
            {
                case 1:
                    return OrderTypes.groceries.ToString();
                case 2:
                    return OrderTypes.Books.ToString();
                case 3:
                    return OrderTypes.Clothes.ToString();
                default:
                    return string.Empty;
            }
        }
    } 

Now it is time to place the code in MainWindow.xaml file

 <Window x:Class="Customers.MainWindow"  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
   xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  
   xmlns:customers="clr-namespace:Customers"  
   Title="MainWindow"  
   >  
   <Grid>  
     <telerik:RadGridView  
       Grid.Row="0"  
       Grid.Column="0"  
       AutoExpandGroups="True"  
       AutoGenerateColumns="False"  
       BorderThickness="0 1"  
       CanUserSortColumns="True"  
       GridLinesVisibility="None"  
       IsReadOnly="True"  
       ItemsSource="{Binding OrderItems}"  
       Margin="0 5"  
       RowIndicatorVisibility="Collapsed"  
       ScrollViewer.HorizontalScrollBarVisibility="Auto"  
       ScrollViewer.VerticalScrollBarVisibility="Auto"  
       SelectionMode="Single"  
       SelectionUnit="FullRow"  
       ShowGroupPanel="False"  
       VerticalAlignment="Top"  
       >  
       <telerik:RadGridView.GroupHeaderTemplate>  
         <DataTemplate DataType="customers:CustomerOrderGrouRow">  
           <Grid>  
             <Grid.RowDefinitions>  
               <RowDefinition Height="Auto"/>  
             </Grid.RowDefinitions>  
             <Grid.ColumnDefinitions>  
               <ColumnDefinition Width="592"/>  
               <ColumnDefinition Width="Auto"/>  
             </Grid.ColumnDefinitions>  
             <TextBlock  
               Grid.Row="0"  
               Grid.Column="0"  
               Margin="10 0 0 0"  
               Text="{Binding Group.Key.OrderTypeName}"   
               />  
             <TextBlock  
               Grid.Row="0"  
               Grid.Column="1"  
               Margin="150 0 0 0"  
               Text="{Binding Group.Key.OrderCost}"   
               />  
           </Grid>  
         </DataTemplate>  
       </telerik:RadGridView.GroupHeaderTemplate>  
       <telerik:RadGridView.GroupDescriptors>  
         <telerik:GroupDescriptor Member="GroupItem"/>  
       </telerik:RadGridView.GroupDescriptors>  
       <telerik:RadGridView.Columns>  
         <!--OrderType-->  
         <telerik:GridViewColumn  
           GroupMemberPath="GroupItem"  
           IsSortable="True"  
           IsVisible="False"  
           MaxWidth="190"  
           MinWidth="80"  
           SortMemberPath="OrderType"  
           Width="130"  
           >  
         </telerik:GridViewColumn>  
         <!--FirstName-->  
         <telerik:GridViewColumn  
           Header="FirstName"  
           HeaderTextAlignment="Left"  
           IsSortable="True"  
           MaxWidth="220"  
           MinWidth="220"  
           SortMemberPath="FirstName"  
           Width="220"  
           >  
           <telerik:GridViewColumn.CellTemplate>  
             <DataTemplate  
               DataType="customers:CustomerOrderViewModel"  
               >  
               <TextBlock  
                 Margin="5"  
                 Text="{Binding FirstName}"  
                 TextAlignment="Left"  
                 />  
             </DataTemplate>  
           </telerik:GridViewColumn.CellTemplate>  
         </telerik:GridViewColumn>  
         <!--LastName-->  
         <telerik:GridViewColumn  
           Header="LastName"  
           HeaderTextAlignment="Left"  
           IsSortable="True"  
           MaxWidth="220"  
           MinWidth="220"  
           SortMemberPath="LastName"  
           Width="220"  
           >  
           <telerik:GridViewColumn.CellTemplate>  
             <DataTemplate  
               DataType="customers:CustomerOrderViewModel"  
               >  
               <TextBlock  
                 Margin="5"  
                 Text="{Binding LastName}"  
                 TextAlignment="Left"  
                 />  
             </DataTemplate>  
           </telerik:GridViewColumn.CellTemplate>  
         </telerik:GridViewColumn>  
         <!--Email-->  
         <telerik:GridViewColumn  
           Header="Email"  
           HeaderTextAlignment="Left"  
           IsSortable="True"  
           MaxWidth="220"  
           MinWidth="220"  
           SortMemberPath="Email"  
           Width="220"  
           >  
           <telerik:GridViewColumn.CellTemplate>  
             <DataTemplate  
               DataType="customers:CustomerOrderViewModel"  
               >  
               <TextBlock  
                 Margin="5"  
                 Text="{Binding Email}"  
                 TextAlignment="Left"  
                 />  
             </DataTemplate>  
           </telerik:GridViewColumn.CellTemplate>  
         </telerik:GridViewColumn>  
         <!--Order Cost-->  
         <telerik:GridViewDataColumn  
           Header="Order Cost"  
           HeaderTextAlignment="Left"  
           IsFilterable="False"  
           IsSortable="True"  
           MaxWidth="115"  
           MinWidth="115"  
           SortMemberPath="OrderCost"  
           Width="115"  
           >  
           <telerik:GridViewColumn.CellTemplate>  
             <DataTemplate  
               DataType="customers:CustomerOrderViewModel"  
               >  
               <TextBlock  
                 Margin="5"  
                 Text="{Binding OrderCost}"  
                 TextAlignment="Right"  
                 />  
             </DataTemplate>  
           </telerik:GridViewColumn.CellTemplate>  
         </telerik:GridViewDataColumn>  
       </telerik:RadGridView.Columns>  
     </telerik:RadGridView>  
   </Grid>  
 </Window>  

Finally in the codebehind file (MainWindow.xaml.cs) add the following code

    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();

            var viewModel = new MainWindowViewModel();
            DataContext = viewModel;
        }
    } 

After writing all above code output window looks below