Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

TreeListView.RowDetailsTemplate Property

Gets or sets a template used to display row details.

Namespace: DevExpress.Xpf.Grid

Assembly: DevExpress.Xpf.Grid.v24.2.dll

NuGet Package: DevExpress.Wpf.Grid.Core

#Declaration

public DataTemplate RowDetailsTemplate { get; set; }

#Property Value

Type Description
DataTemplate

A template used to display row details.

#Remarks

Use the RowDetailsTemplate property to display custom content at the bottom of a row. The TreeListView.RowDetailsVisibilityMode property specifies how to display row details.

The template’s data context is a TreeListRowData object. Use the following binding path to access a property of an object in the ItemsSource collection: Row.[YourPropertyName].

The following code sample displays the employee information in the focused row’s details:

TreeListView - RowDetailsTemplate Example

<Window.Resources>
    <DataTemplate x:Key="DetailCoreTemplate">
        <dx:MeasurePixelSnapper>
            <Grid Background="{dxi:ThemeResource {dxgt:TableViewThemeKey ResourceKey=EditFormBackground}}"
                  TextBlock.Foreground="{dxi:ThemeResource {dxgt:TableViewThemeKey ResourceKey=EditFormForeground}}">
                <Grid Margin="12">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Decorator MaxWidth="174" Width="{Binding Path=CellData[0].Column.ActualDataWidth}" Margin="-12,0,0,0">
                        <dxe:ImageEdit HorizontalAlignment="Left"
                                       VerticalAlignment="Top"
                                       Source="{Binding Path=Row.Photo}"
                                       Grid.Column="0"
                                       Margin="12,0"
                                       ShowMenu="False"
                                       IsReadOnly="True" />
                    </Decorator>
                    <Grid Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="12" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Column="0" Grid.Row="0" Text="Name:" />
                        <TextBlock Grid.Column="0" Grid.Row="1" Text="Position:" />
                        <TextBlock Grid.Column="0" Grid.Row="2" Text="Hire Date:" />
                        <TextBlock Grid.Column="0" Grid.Row="3" Text="About:" />
                        <TextBlock Grid.Column="0" Grid.Row="4" Text="Address:" />
                        <TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding Row.FirstName}" />
                        <TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Row.Title}" />
                        <TextBlock Grid.Column="2" Grid.Row="2" Text="{Binding Row.HireDate, StringFormat=D}" />
                        <TextBlock Grid.Column="2" Grid.Row="3" HorizontalAlignment="Left" Text="{Binding Row.Notes}" TextWrapping="Wrap" />
                        <TextBlock Grid.Column="2" Grid.Row="4" Text="{Binding Row.Address}" />
                    </Grid>
                </Grid>
            </Grid>
        </dx:MeasurePixelSnapper>
    </DataTemplate>
</Window.Resources>
<!-- -->
<dxg:GridControl.View>
    <dxg:TreeListView>
        <dxg:TreeListView.RowDetailsTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding}" 
                                ContentTemplate="{StaticResource DetailCoreTemplate}"/>
            </DataTemplate>
        </dxg:TreeListView.RowDetailsTemplate>
    </dxg:TreeListView>
</dxg:GridControl.View>

The TreeListView.DataRowTemplate property overrides the RowDetailsTemplate property.

Refer to the following help topic for more information: Appearance Customization.

See Also