Row Details Template

The RowDetailsTemplate template controls the appearance of the row details area. The row details section appears below a row and can display additional information.

In Expression Blend, you can create an empty template at design time by selecting the C1DataGrid control and then clicking Object | Edit Other Templates | Edit RowDetailsTemplate | Create Empty.

You can include text, controls, and more in the RowDetailsTemplate, including controls bound to data. For example, the following template includes bound and unbound text and check boxes:

XAML	Copy Code
<c1:C1DataGrid.RowDetailsTemplate> <!-- Begin row details section. --> <DataTemplate> <Border BorderBrush="DarkGray" BorderThickness="1" Background="Azure"> <StackPanel Orientation="Horizontal"> <StackPanel> <StackPanel Orientation="Horizontal"> <!-- Controls are bound to properties. --> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Name}" Margin="0,0,10,0" VerticalAlignment="Bottom" /> <TextBlock FontSize="12" Text="Order Date: " VerticalAlignment="Bottom"/> <TextBlock FontSize="12" Text=" Complete:" VerticalAlignment="Bottom" /> CheckBox IsChecked="{Binding Complete, Mode=TwoWay}" VerticalAlignment="Center" /> </StackPanel> <TextBlock FontSize="12" Text="Notes: " /> <TextBox FontSize="12" Text="{Binding Notes, Mode=TwoWay}" Width="420" TextWrapping="Wrap"/> </StackPanel> </StackPanel> </Border> </DataTemplate> <!-- End row details section. --> </c1:C1DataGrid.RowDetailsTemplate>

XAML

Copy Code

<c1:C1DataGrid.RowDetailsTemplate>
   <!-- Begin row details section. -->
   <DataTemplate>
       <Border BorderBrush="DarkGray" BorderThickness="1" Background="Azure">
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
               <!-- Controls are bound to properties. -->
                <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Name}" Margin="0,0,10,0" VerticalAlignment="Bottom" />
                <TextBlock FontSize="12" Text="Order Date: " VerticalAlignment="Bottom"/>
                <TextBlock FontSize="12" Text=" Complete:" VerticalAlignment="Bottom" />
               CheckBox IsChecked="{Binding Complete, Mode=TwoWay}" VerticalAlignment="Center" />
                </StackPanel>
                <TextBlock FontSize="12" Text="Notes: " />
                <TextBox FontSize="12" Text="{Binding Notes, Mode=TwoWay}" Width="420" TextWrapping="Wrap"/>
            </StackPanel>
        </StackPanel>
        </Border>
    </DataTemplate>
    <!-- End row details section. -->
</c1:C1DataGrid.RowDetailsTemplate>