<Window x:Class="WpfApplication8.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikData="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data" 
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="ordersHierarchyChildTemplate">
            <telerik:RadGridView ItemsSource="{Binding Orders}">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewToggleRowDetailsColumn/>
                </telerik:RadGridView.Columns>
                <telerik:RadGridView.RowDetailsTemplate>
                    <DataTemplate>
                        <StackPanel Background="#FF525252">
                            <StackPanel.Resources>
                                <LinearGradientBrush  x:Key="OfficeBlackBackGround" EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF343639" Offset="1"/>
                                    <GradientStop Color="#FF373737" Offset="0"/>
                                    <GradientStop Color="#FF3A3B3D" Offset="0.15"/>
                                </LinearGradientBrush>
                                <LinearGradientBrush x:Key="OfficeBlackFrame" EndPoint="0.491356224416577,0.974451988955925" StartPoint="0.777113682471078,-0.027352265088688">
                                    <GradientStop Color="#FF7D7D7D" Offset="0.032501"/>
                                    <GradientStop Color="#FF4D4D4D" Offset="0.036112000000000033"/>
                                    <GradientStop Color="#FF656565" Offset="0.065002"/>
                                    <GradientStop Color="#FF454545" Offset="0.068613000000000035"/>
                                    <GradientStop Color="#FF353535" Offset="0.72841"/>
                                    <GradientStop Color="#FF050505" Offset="0.987361"/>
                                    <GradientStop Color="#FF9F9F9F" Offset="0.54500001668930054"/>
                                    <GradientStop Color="#FF454545" Offset="0.381"/>
                                    <GradientStop Color="#FF1C1C1C" Offset="0.66"/>
                                </LinearGradientBrush>
                                <LinearGradientBrush x:Key="GridViewBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF474747" Offset="1"/>
                                    <GradientStop Color="#FF242424" Offset="0"/>
                                    <GradientStop Color="#FF3F3F3F" Offset="0.15"/>
                                    <GradientStop Color="#FF121212" Offset="0.152"/>
                                </LinearGradientBrush>

                            </StackPanel.Resources>
                            <Border BorderBrush="#FF000000" BorderThickness="1" Margin="0,0,0,0">
                                <Grid Background="{StaticResource GridViewBackground}" Width="Auto" HorizontalAlignment="Stretch">
                                    <StackPanel Orientation="Horizontal" Margin="30" >
                                        <StackPanel Margin="5" >
                                            <TextBlock Foreground="White" FontWeight="Bold">StartDate:</TextBlock>
                                            <telerik:RadDatePicker Foreground="Black" SelectedDate="{Binding StartDate,Mode=TwoWay}"/>
                                            <TextBlock Foreground="White" FontWeight="Medium">Changed Date:</TextBlock>
                                            <TextBlock Foreground="White"   Text="{Binding StartDate,Mode=TwoWay}" ></TextBlock>
                                        </StackPanel>
                                        <StackPanel Margin="5">
                                            <TextBlock Foreground="White" FontWeight="Bold">EndDate:</TextBlock>
                                            <telerik:RadDatePicker Foreground="Black" SelectedDate="{Binding EndDate,Mode=TwoWay}"/>
                                            <TextBlock Foreground="White" FontWeight="Medium">Changed Date:</TextBlock>
                                            <TextBlock Foreground="White"  Text="{Binding EndDate,Mode=TwoWay}" ></TextBlock>
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </StackPanel>

                    </DataTemplate>
                </telerik:RadGridView.RowDetailsTemplate>
            </telerik:RadGridView>


        </DataTemplate>
    </Window.Resources>
    <Grid>
        <telerik:RadGridView x:Name="exampleData" Loaded="exampleData_Loaded" EnableRowVirtualization="False" Foreground="AliceBlue" HierarchyChildTemplate="{StaticResource ordersHierarchyChildTemplate}" AutoGenerateColumns="False">
            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerikData:PropertyRelation ParentPropertyName="Orders"/>
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}"></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding CustomerName}"></telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>
