DataGrid RowDetailsTemplate of WPF 4.0

In this post I will show you how you can use the RowDetailsTemplate of the datagrid control to show the additional information of the record. Let us start with the code. I will continue my last post where I have introduce some of the basic information about the data grid control. Here I will add the RowDetailsTemplate of the data grid control and also add some values to show the detail of the row when the row is clicked by mouse. Below are the screen shot of the example code In image 1 data grid control is showing normally and In Image 2, the detail of the row is visible when user click on the row of  the data grid control.

Image 1

Image 2

Below is the my xaml code which is used to create the RowDetailsTemplates. Here you can see that the you can add the DataTemplate in the RowDetailsTemplate. In the data template you can define your own layout for the detail to be shown when user click on the row of the datagrid control.

<DataGrid Name="dgrdDataGrid"   AutoGenerateColumns="False" >
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"  CanUserSort="False" />
                <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" CanUserResize="False"/>
                <DataGridTextColumn Binding="{Binding EmailID}" Header="Email Address" CanUserReorder="False"/>
                <DataGridTextColumn Binding="{Binding ContactNumber}" Header="Contact Number"/>
                <DataGridTextColumn Binding="{Binding DateOfBirth, StringFormat='dd/MM/yyyy'}" Header="Date Of Birth"/>
            </DataGrid.Columns>
            <DataGrid.RowDetailsTemplate>
                <DataTemplate >
                    <Grid Height="90">
                        <Grid.RowDefinitions>
                            <RowDefinition  Height="1*"/>
                            <RowDefinition  Height="25"/>
                            <RowDefinition  Height="25"/>
                            <RowDefinition  Height="1*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.RowSpan="4" Grid.ColumnSpan="4" Background="#FFD2EBFF" BorderBrush="#FF79C4FF" CornerRadius="3" BorderThickness="2,2,2,2" Margin="2"/>
                        <TextBlock Text="Name:" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right" />
                        <TextBlock Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" Margin="2">
                            <Run Text="{Binding LastName}"/>
                            <Run Text=", "/>
                            <Run Text="{Binding FirstName}"/>
                        </TextBlock>
                        <TextBlock Text="Contact No.:" Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right" />
                        <TextBlock Text="{Binding ContactNumber}" Grid.Column="3" Grid.Row="1" VerticalAlignment="Center" />

                        <TextBlock Text="Email Address:" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Right" />
                        <TextBlock Text="{Binding EmailID}" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" Margin="2"/>
                        <TextBlock Text="Date Of Birth:" Grid.Column="2" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Right" />
                        <TextBlock Text="{Binding DateOfBirth, StringFormat='dd MMM, yyyy'}" Grid.Column="3" Grid.Row="2" VerticalAlignment="Center" Margin="2"/>
                    </Grid>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>
        </DataGrid>

When working with the RowDetailTemplate there are certain properties and events which you may need at certain level. The RowDetailsVisibilityMode is used for the detail of the row to be showed. Collapsed( The row details section is not displayed for any rows),Visible (The row details section is displayed for all rows), VisibleWhenSelected (The row details section is displayed only for selected rows) are the constant value for the RowDetailsVisibilityMode property. The default value for the RowDetailsVisibilityMode property is VisibleWhenSelected. when the visibility of a row details element changes then RowDetailsVisibilityChangede event is fired which you can handler for you needs.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!