How To Add Row Details In WPF Datagrid?

Updated on Jan 13, 2026

About the sample

This example illustrates how to add row details to WPF DataGrid (SfDataGrid).

DataGrid 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.

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,

Create TemplateViewDefinition.
Define data template for the TemplateViewDefinition.RowTemplate property.
Then add TemplateViewDefinition to the SfDataGrid.DetailsViewDefinition.

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>

Adding row details using the RowTemplate

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>

Adding row details using the RowTemplateSelector

Height customization

You can customize height of the row that contains RowTemplate by using the TemplateViewDefinition.HeightMode property.

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 - Record Template View documentation, where you can find about row details with code examples.

Requirements to run the demo

Visual Studio 2015 and above versions.