- 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