My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. WPF
  3. SfDataGrid

How to Add Row Details in WPF DataGrid (SfDataGrid)?

7 mins read

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

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>

Row template in WPF DataGrid.


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>

Row template selector in WPF DataGrid


Height customization 

You can customize height of the row that contains RowTemplate by using the TemplateViewDefinition.HeightMode property. The height modes are as follows.

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

View sample in GitHub

Conclusion


I hope you enjoyed learning about how to add row details in DataGrid.

 

You can refer to our WPF DataGrid 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!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied