Category / Section
How to Add Row Details in WPF DataGrid (SfDataGrid)?
7 mins read
WPF SfDataGrid (SfDataGrid) provides support to represent additional information of a row using TemplateViewDefinition that can be defined in DataGrid. It allows you to load any WPF controls to TemplateViewDefinition.RowTemplate in order to display the additional information of a row. You can expand or collapse the row template view by using an expander in a row or programmatically.
Create TemplateViewDefinition.
Define data template for the TemplateViewDefinition.RowTemplate property.
Then add TemplateViewDefinition to the SfDataGrid.DetailsViewDefinition.
Defining row template
Record Template view can be generated for the rows by using the RowTemplate defined in the TemplateViewDefinition.
Follow the below steps to define the row template,
You can bind the row data using the Data.PropertyName (where Data is the underlying object bound)
<Window.Resources>
<DataTemplate x:Key="DetailsViewTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="125"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="0" Grid.RowSpan="2"
Margin="5" Height="150"
HorizontalAlignment="Left"
Source="{Binding Path=Data.CustomerID, Converter={StaticResource ImageConverter}}" />
<Label Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Left"
Margin="25,0,0,0"
Content="Order Details"
FontWeight="Bold" />
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Product Name :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ProductName}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Quantity :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Quantity}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Unit Price :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.UnitPrice, StringFormat='{}{0:C}'}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Discount :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Discount, StringFormat='{}{0:P}'}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Freight :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Freight, StringFormat='{}{0:c}'}"/>
</StackPanel>
</StackPanel>
<Label Grid.Column="2" Grid.Row="0"
HorizontalAlignment="Left"
Margin="25,0,0,0"
Content="Shipping Details"
FontWeight="Bold" />
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Order Date :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.OrderDate, StringFormat=d}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Shipped Date :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShippedDate, StringFormat=d}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Ship Address :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShipAddress}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Ship Postal Code :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShipPostalCode, StringFormat=hh\\:mm}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Delivery Delay :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.DeliveryDelay, StringFormat=dd\\:hh}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</Window.Resources>
<syncfusion:SfDataGrid Name="dataGrid" Margin="5" ItemsSource="{Binding OrderList}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:TemplateViewDefinition HeightMode="ViewPort" RowTemplate="{StaticResource DetailsViewTemplate}"/>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
Defining RowTemplateSelector
You can to choose different DataTemplate for the record template view definitions based on underlying data object by using TemplateViewDefinition.RowTemplateSelector property.
<Window.Resources>
<DataTemplate x:Key="DetailsViewTemplate_WithImage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="125"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="0" Grid.RowSpan="2"
Margin="5" Height="150"
HorizontalAlignment="Left"
Source="{Binding Path=Data.CustomerID, Converter={StaticResource ImageConverter}}" />
<Label Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Left"
Margin="25,0,0,0"
Content="Order Details"
FontWeight="Bold" />
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Product Name :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ProductName}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Quantity :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Quantity}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Unit Price :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.UnitPrice, StringFormat='{}{0:C}'}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Discount :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Discount, StringFormat='{}{0:P}'}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Freight :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Freight, StringFormat='{}{0:c}'}"/>
</StackPanel>
</StackPanel>
<Label Grid.Column="2" Grid.Row="0"
HorizontalAlignment="Left"
Margin="25,0,0,0"
Content="Shipping Details"
FontWeight="Bold" />
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Order Date :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.OrderDate, StringFormat=d}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Shipped Date :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShippedDate, StringFormat=d}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Ship Address :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShipAddress}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Ship Postal Code :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShipPostalCode, StringFormat=hh\\:mm}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Delivery Delay :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.DeliveryDelay, StringFormat=dd\\:hh}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DetailsViewTemplate_WithoutImage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="125"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Left"
Margin="25,0,0,0"
Content="Order Details"
FontWeight="Bold" />
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Product Name :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ProductName}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Quantity :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Quantity}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Unit Price :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.UnitPrice, StringFormat='{}{0:C}'}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Discount :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Discount, StringFormat='{}{0:P}'}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Left" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Freight :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.Freight, StringFormat='{}{0:c}'}"/>
</StackPanel>
</StackPanel>
<Label Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Left"
Margin="25,0,0,0"
Content="Shipping Details"
FontWeight="Bold" />
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Order Date :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.OrderDate, StringFormat=d}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Shipped Date :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShippedDate, StringFormat=d}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Ship Address :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShipAddress}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Ship Postal Code :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.ShipPostalCode, StringFormat=hh\\:mm}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label
HorizontalAlignment="Right" VerticalAlignment="Center"
FontWeight="SemiBold"
Content="Delivery Delay :"/>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="5"
Text="{Binding Data.DeliveryDelay, StringFormat=dd\\:hh}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
<local:DetailsViewTemplateSelector x:Key="RecordTemplateSelector"/>
</Window.Resources>
<syncfusion:SfDataGrid Name="dataGrid" ItemsSource="{Binding OrderList}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:TemplateViewDefinition HeightMode="ViewPort" RowTemplateSelector="{StaticResource RecordTemplateSelector}" />
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
Height customization
You can customize height of the row that contains RowTemplate by using the TemplateViewDefinition.HeightMode property. The height modes are as follows.
Height mode Definition Auto Arranges template for the actual size as the RowTemplate is measured. Fixed Arranges template for the specified height in TemplateViewDefinition.Height. ViewPort Arranges template for the ViewPortHeight when the RowTemplate actual height is greater than ViewPortHeight.
Populating record template view using events
You can set the RowTemplate on-demand when expanding the record by using the GridDetailsViewExpandingEventArgs.RowTemplate property in SfDataGrid.DetailsViewExpanding event handler.
this.dataGrid.DetailsViewExpanding += DataGrid_DetailsViewExpanding;
private void DataGrid_DetailsViewExpanding(object sender, Syncfusion.UI.Xaml.Grid.GridDetailsViewExpandingEventArgs e)
{
e.RowTemplate = GetDataTemplate();
}
private DataTemplate GetDataTemplate()
{
FrameworkElementFactory textBlock = new FrameworkElementFactory(typeof(TextBlock));
Binding binding = new Binding();
textBlock.SetBinding(TextBlock.TextProperty, binding);
binding.Path = new PropertyPath("Data.OrderID");
var dataTemplate = new DataTemplate() { VisualTree = textBlock };
return dataTemplate;
}
Take a moment to peruse the WPF DataGrid - Row details documentation, where you can find about row details with code examples.
Please refer this link to know about the essential features of WPF DataGrid.
Conclusion
I hope you enjoyed learning about how to add row details in WPF DataGrid (SfDataGrid).
You can refer to our WPF SfDataGrid feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
