Edit this page

Row Details Template

The Row Details template is defined through the RowDetailsTemplate property of the RadGridView.

To learn how to manage the displaying of the Row Details read this topic.

Basic RowDetails Template

Here is an example for a basic row details template (Example 1). You can observe the result in Figure 1.

[XAML] Example 1: Definition of Basic RowDetails Template

<telerik:RadGridView x:Name="radGridView"
                 RowDetailsVisibilityMode="VisibleWhenSelected">
    <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal"
                Margin="10,10,10,10">
                <TextBlock Text="Stadium Capacity: " />
                <TextBlock Text="{Binding StadiumCapacity}" />
            </StackPanel>
        </DataTemplate>
    </telerik:RadGridView.RowDetailsTemplate>
    <!--...-->
</telerik:RadGridView>

Figure 1: Displays the result of the applied Basic RowDetails Template.

gridview-row-details-template-basic

Complex RowDetails Template

Here is an example for a complex row details template (Example 2). You can observe the result in Figure 1.

[XAML] Example 2: Definition of Complex RowDetails Template

<Grid>
    <Grid.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
        <DataTemplate x:Key="RowDetailsTemplate">
            <telerik:RadGridView Name="playersGrid" 
                        ItemsSource="{Binding Players}" 
                        AutoGenerateColumns="False">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Number}"/>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Position}"/>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Country}"/>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </DataTemplate>
    </Grid.Resources>
    <telerik:RadGridView Grid.Row="0" 
                Name="clubsGrid" 
                ItemsSource="{Binding Clubs, Source={StaticResource MyViewModel}}"
                AutoGenerateColumns="False"
                RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                Margin="5">
        <telerik:RadGridView.Columns>
            <telerik:GridViewToggleRowDetailsColumn/>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                            Header="Est." 
                            DataFormatString="{}{0:yyyy}"/>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" 
                            Header="Stadium" 
                            DataFormatString="{}{0:N0}"/>
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>
</Grid>

Figure 2: Displays the result of the applied Complex RowDetails Template.
gridview-row-details-template-complex

See Also