How to change the Classical Hirerechial related table as discribed in Telerik WPF Demo Data Grid Look

[Wael Slaman]

Hello Telerik Team,

I managed to make RadGridView show multiple related tables (LINQ to SQL) by approach used in FirstLook sample (create GridViewTableDefinition and TableRelation). If I add two table definitions it works OK (besides showing empty table if no related record exists).

I'd like to know if there exists a way, to show each of related tables in separate tab of RadTabControl.

1. RadGridView (Attached Image which describes how is related tables are used via TabControl in your WPF Demo Application)
2. Telerik_WPFControls_Demo_DataGrid (Attached Image which describes how is related tables are used via TabControl in your WPF Demo Application)
3. My_TabControlStylingPic (The style that I want to use )
4. CurrentRelatedTabelLook( The current look of the related table)

What I want to do is to change the look in (Image 4) by (Image 3)

5. The following code (Is the My own XAML code of My_TabControlStylingPic - as attached) - It was designed using Blend. Here is the code:

<Window
    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"
    x:Class="RadTabControlStyling.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="703" Height="533">

    <Grid x:Name="LayoutRoot">
        <Rectangle Stroke="Black" Margin="8,8,8,0" Fill="#FF525252" VerticalAlignment="Top" Height="387"/>
        <Border Margin="8,8,8,0" BorderBrush="Black" BorderThickness="3" VerticalAlignment="Top" Height="387">
            <Rectangle Stroke="Black" Margin="20,84,20,0" StrokeThickness="2" VerticalAlignment="Top" Height="276">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF3C3C3C" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Border>
        <telerik:RadTabControl Margin="50,53,52,0" VerticalAlignment="Top" Height="39">
            <telerik:RadTabControl.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FF969494" Offset="1"/>
                    <GradientStop Color="#FF191818" Offset="0.261"/>
                    <GradientStop Color="#FF585353" Offset="0.504"/>
                    <GradientStop Color="#FF676666" Offset="0.75"/>
                </LinearGradientBrush>
            </telerik:RadTabControl.Background>
            <telerik:RadTabItem Width="110" Height="30" BorderThickness="2" Header="RadTabItem" telerik:StyleManager.Theme="Vista"/>
            <telerik:RadTabItem Width="110" BorderThickness="2" Header="RadTabItem"/>
            <telerik:RadTabItem Width="110" BorderThickness="2" Header="RadTabItem"/>
        </telerik:RadTabControl>
        <StackPanel VerticalAlignment="Top" Height="30" Margin="34,96,34,0">
            <StackPanel.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FF373737" Offset="1"/>
                </LinearGradientBrush>
            </StackPanel.Background>
        </StackPanel>
    </Grid>
</Window>

6. The following code is the current code that represents Classical Hirerchial Related Table.

<Window x:Class="RadWpfDataGridsample.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" >

    <Grid Loaded="Grid_Loaded" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.Resources>
            <Style TargetType="Telerik:ChildDataControlsPresenter">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Telerik:ChildDataControlsPresenter">
                            <TabControl>
                                <!--<TabControl.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="0"/>
                                        <GradientStop Color="#FF969494" Offset="1"/>
                                        <GradientStop Color="#FF191818" Offset="0.261"/>
                                        <GradientStop Color="#FF585353" Offset="0.504"/>
                                        <GradientStop Color="#FF676666" Offset="0.75"/>
                                    </LinearGradientBrush>
                                </TabControl.Background>-->

                                <!--<Rectangle Stroke="Black" Margin="8,8,8,0" Fill="#FF525252" VerticalAlignment="Top" Height="387"/>
                                <Border Margin="8,8,8,0" BorderBrush="Black" BorderThickness="3" VerticalAlignment="Top" Height="387">
                                    <Rectangle Stroke="Black" Margin="20,84,20,0" StrokeThickness="2" VerticalAlignment="Top" Height="276">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="Black" Offset="0"/>
                                                <GradientStop Color="#FF3C3C3C" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Border>-->

                                <TabItem Width="110"
                                             Height="30"
                                             BorderThickness="2"
                                             Header="Orders" >
                                    <Telerik:RadGridView ItemsSource="{Binding MasterRecord.Data.Orders}" />
                                </TabItem>
                            </TabControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </Grid.Resources>

        <Telerik:RadGridView Name="radGridView1"
                             ScrollMode="Deferred"
                             ClipToBounds="True"
                             FlowDirection="LeftToRight"
                             MultipleSelect="True"
                             ShowGroupFooters="True"
                             ShowColumnFooters="True"
                             Telerik:StyleManager.Theme="Vista"
                             Margin="0,0,0,12" />
    </Grid>
</Window>

Now... what I want to do is just to modify the code in 6 by code in 5 in order to get the look in My_TabControlStylingPic attached image.


Hope that you can help me since I am stack, and cannot go on in my application. This is teh look that my customer needs.

Thank you
Wael

6. The following code is the current code that represents Classical Hirerchial Related Table.Hope that you can help me since I am stack, and cannot go on in my application. This is teh look that my customer needs.Thank you Wael

[Wael Slaman]

Hi,

I have already succeeded to do part  of what I have asked for.
 The attached image will explain what I have succeeded to achieve, and it explains also (I worte there) what I did , and what I need to do .

Here is teh code:

<Window x:Class="RadWpfDataGridsample.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:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">


    <Window.Resources>
        <LinearGradientBrush x:Key="TabItemButtonBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF969494" Offset="1"/>
            <GradientStop Color="#FF191818" Offset="0.261"/>
            <GradientStop Color="#FF585353" Offset="0.504"/>
            <GradientStop Color="#FF676666" Offset="0.75"/>
        </LinearGradientBrush>
    </Window.Resources>



    <Grid Loaded="Grid_Loaded">
        <Grid.Resources>
            <Style TargetType="Telerik:ChildDataControlsPresenter">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Telerik:ChildDataControlsPresenter">
                            <TabControl>
                                <Grid x:Name="HirerchialTableLook">
                                    <Rectangle Stroke="Black" Margin="8,8,8,0" Fill="#FF525252" VerticalAlignment="Top" Height="387"/>
                                    <Border Margin="8,8,8,0" BorderBrush="Black" BorderThickness="3" VerticalAlignment="Top" Height="387">
                                        <Rectangle Stroke="Black" Margin="20,84,20,0" StrokeThickness="2" VerticalAlignment="Top" Height="276">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="Black" Offset="0"/>
                                                    <GradientStop Color="#FF3C3C3C" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Border>
                                    <Telerik:RadTabControl Margin="50,53,52,0" VerticalAlignment="Top" Height="39">
                                        <Telerik:RadTabControl.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="Black" Offset="0"/>
                                                <GradientStop Color="#FF969494" Offset="1"/>
                                                <GradientStop Color="#FF191818" Offset="0.261"/>
                                                <GradientStop Color="#FF585353" Offset="0.504"/>
                                                <GradientStop Color="#FF676666" Offset="0.75"/>
                                            </LinearGradientBrush>
                                        </Telerik:RadTabControl.Background>
                                        <Telerik:RadTabItem Width="110" Height="30" BorderThickness="2" Header="Orders Details" VerticalAlignment="Center" Telerik:StyleManager.Theme="Vista"/>
                                        <Telerik:RadTabItem Width="110" BorderThickness="2" Header="RadTabItem"/>
                                        <Telerik:RadTabItem Width="110" BorderThickness="2" Header="RadTabItem"/>
                                    </Telerik:RadTabControl>
                                    <StackPanel VerticalAlignment="Top" Height="30" Margin="34,96,34,0">
                                        <StackPanel.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="Black" Offset="0"/>
                                                <GradientStop Color="#FF373737" Offset="1"/>
                                            </LinearGradientBrush>
                                        </StackPanel.Background>
                                    </StackPanel>
                                </Grid>
                            </TabControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


        </Grid.Resources>

        <Telerik:RadGridView Name="radGridView1"
                             ScrollMode="Deferred"
                             ClipToBounds="True"
                             FlowDirection="LeftToRight"
                             MultipleSelect="True"
                             ShowGroupFooters="True"
                             ShowColumnFooters="True"
                             Telerik:StyleManager.Theme="Vista"
                             Margin="0,0,0,12" ColumnsWidthMode="Fill" />

    </Grid>
</Window>

Please help me to achieve what I have explained in the attached image.


Thank you
Wael

[Wael Slaman]

Hello,

:-) after a good food , my brain started to work more :-)
I have succeeded to do more things.

Please visit the attached image, and you can see what I have already done.

One more thing that I am not able to figure out , is how to populate the related table - dataGrid when I press on teh first Tab "Orders Details"
Another image will be attached to explain what i mean exactly.


Needed issues are written on the attached image.

I am suing the following code:

<Window x:Class="RadWpfDataGridsample.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:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">


    <Window.Resources>
        <LinearGradientBrush x:Key="TabItemButtonBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF969494" Offset="1"/>
            <GradientStop Color="#FF191818" Offset="0.261"/>
            <GradientStop Color="#FF585353" Offset="0.504"/>
            <GradientStop Color="#FF676666" Offset="0.75"/>
        </LinearGradientBrush>
    </Window.Resources>



    <Grid Loaded="Grid_Loaded">
        <Grid.Resources>
            <Style TargetType="Telerik:ChildDataControlsPresenter">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Telerik:ChildDataControlsPresenter">
                            <!--<TabControl>-->
                                <Grid x:Name="HirerchialTableLook">
                                    <!--<Rectangle Stroke="Black" Margin="30,30,30,30" Fill="#FF525252" VerticalAlignment="Top" Height="387"/>-->
                                    <!--<Border Margin="30,30,30,30" BorderBrush="Black" BorderThickness="3" VerticalAlignment="Top" Height="387">-->
                                        <Rectangle Stroke="Black" Margin="30,93,30,50" StrokeThickness="2" VerticalAlignment="Top" Height="350">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="Black" Offset="0"/>
                                                    <GradientStop Color="#FF3C3C3C" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    <!--</Border>-->
                                    <Telerik:RadTabControl Margin="70,51,70,0" VerticalAlignment="Top" Height="39">
                                        <Telerik:RadTabControl.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="Black" Offset="0"/>
                                                <GradientStop Color="#FF969494" Offset="1"/>
                                                <GradientStop Color="#FF191818" Offset="0.261"/>
                                                <GradientStop Color="#FF585353" Offset="0.504"/>
                                                <GradientStop Color="#FF676666" Offset="0.75"/>
                                            </LinearGradientBrush>
                                        </Telerik:RadTabControl.Background>
                                        <Telerik:RadTabItem
                                                Width="110"
                                                Height="30"
                                                BorderThickness="2"
                                                Header="Orders Details"
                                                VerticalAlignment="Center"
                                                SnapsToDevicePixels="True"
                                                HorizontalContentAlignment="Center"
                                                Telerik:StyleManager.Theme="Vista">
                                                <!--<Telerik:RadGridView ItemsSource="{Binding MasterRecord.Data.Orders}"/>-->
                                        </Telerik:RadTabItem>

                                        <Telerik:RadTabItem Width="110" BorderThickness="2" Header="RadTabItem"/>
                                        <Telerik:RadTabItem Width="110" BorderThickness="2" Header="RadTabItem"/>
                                    </Telerik:RadTabControl>

                                    <StackPanel VerticalAlignment="Top" Height="30" Margin="31,95,31,0">
                                        <StackPanel.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="Black" Offset="0"/>
                                                <GradientStop Color="#FF373737" Offset="1"/>
                                            </LinearGradientBrush>
                                        </StackPanel.Background>
                                    </StackPanel>
                                </Grid>
                            <!--</TabControl>-->
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


        </Grid.Resources>

        <Telerik:RadGridView Name="radGridView1"
                             ScrollMode="Deferred"
                             ClipToBounds="True"
                             FlowDirection="LeftToRight"
                             MultipleSelect="True"
                             ShowGroupFooters="True"
                             ShowColumnFooters="True"
                             Telerik:StyleManager.Theme="Vista"
                             Background="#FF525252"
                             Margin="0,0,0,12" ColumnsWidthMode="Fill" />

                            <!--Background="{StaticResource TabItemButtonBrush}"-->


    </Grid>
</Window>

Please help.
Thank you

[Stefan Dobrev]

Hi Wael,

Looking at your example it seems that you are using the hierarchy functionality of the grid via table definitions. However if you look at our first look example you can see that it is using the RowDetails feature. It is best if you implement your requirements with RowDetails, because this will give you greater flexibility. Please check again how this is achieved in the First Look example here.

Regarding your other questions here are my answers:

• You can use ShowGroupPanel property to hide the group panel.
  • You can use binding in the header property of the TabItem. For example Header={Binding OtherTableName}, where OtherTableName should be a property on the DataContext that you are binding the control to.
• You can use VerticalAlignment / VerticalContentAlignment properties to control the text alignment.

All the best,
Stefan Dobrev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Wael Slaman]

Hi,

Thank you for asnwering. RowDetails. I will review the example. Did not see that before.
That gives me more flexibility to build my data .

Thank you , and I guess I will be back to you :-)
Wae