Create an Footer for dock panel

[gautham]

Hello,

                I am stuck with following issue.

 I have created an dock panel of pattern:

<telerikDocking:RadSplitContainer Orientation="Horizontal">

 <telerikDocking:RadPaneGroup>

  <telerikDocking:RadPane>

<Datagrid Autogenerate column=false/>  ------------------------->*

 </telerikDocking:RadPane>

 </telerikDocking:RadPaneGroup>

 <telerikDocking:RadPaneGroup>

  <telerikDocking:RadPane>

 </telerikDocking:RadPane>

 </telerikDocking:RadPaneGroup>

 <telerikDocking:RadPaneGroup>

  <telerikDocking:RadPane>

 </telerikDocking:RadPane>

 </telerikDocking:RadPaneGroup>

<telerikDocking:RadSplitContainer>

1)When I put datagrid *, set the height  and expand /collapse the docking panel my datagrid works fine, but  when I not set the height  datagid does not expand when I expand the dock panel. 

2)I want to set an general(common)  footer and header  for all telerikdocking panel  pattern shown above and it  atonce .

                                                       Thanks & Regards,

                                                             Gautham.

[Miroslav Nedyalkov]

Hi gautham,

1) I weren't able to reproduce the problem - the DataGrid seems to fill the Pane as expected without setting Width and Height. I set its background of the DataGrid to Red to indicate this easier. I'm using the following XAML:

<telerikDocking:RadDocking>
    <telerikDocking:RadSplitContainer Orientation="Horizontal">
        <telerikDocking:RadPaneGroup>
            <telerikDocking:RadPane>
                <datagrid:DataGrid AutoGenerateColumns="False" Background="Red" />
            </telerikDocking:RadPane>
        </telerikDocking:RadPaneGroup>

        <telerikDocking:RadPaneGroup>
            <telerikDocking:RadPane>
            </telerikDocking:RadPane>
        </telerikDocking:RadPaneGroup>

        <telerikDocking:RadPaneGroup>
            <telerikDocking:RadPane>
            </telerikDocking:RadPane>
        </telerikDocking:RadPaneGroup>

    </telerikDocking:RadSplitContainer>
</telerikDocking:RadDocking>

Could you please provide us with a sample that reproduces the problem and could you explain us in more details what is your requirement? This will help us to investigate the problem.

2) Could you please explain in more details what you mean by footer and header? A screenshot and more detailed explanation would be of great help.

Regards,
Miroslav Nedyalkov
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.

[gautham]

Hi Miroslav,

My first issue was resolved by adding  ScrollViewer.HorizontalScrollBarVisibility="Auto"  in RadSplitContainer. 2nd Issue is that, I want to display some information say Number of Records (summary information) in status bar(thats what i meant by footer) of each RadPane. How can I achive this?

Also how to define different heights for different panes? If I define height in RadPane, it does not work. I have 3 horizantal RadPanes one below other. It is taking same height for all three.

Regards,

Gautham

[Miroslav Nedyalkov]

Hi gautham,

You cannot set Width and Height directly to the panes (this will result in changing the size of the headers). What you need to is to set the relative size of the RadPaneGroup or RadSplitContainer controls that are in a common RadSplitContainer. You can do that be setting the attached property RelativeSize of the ProportionalStackPanel class. Here is an example of what I mean:

<telerikDocking:RadSplitContainer InitialPosition="DockedTop">
    <telerikDocking:RadPaneGroup telerikDocking:ProportionalStackPanel.RelativeSize="40, 40">
        <telerikDocking:RadPane x:Name="pane1" Header="A">
            <Button Content="B" />
        </telerikDocking:RadPane>

    </telerikDocking:RadPaneGroup>

    <telerikDocking:RadPaneGroup telerikDocking:ProportionalStackPanel.RelativeSize="20, 20">
        <telerikDocking:RadPane Header="d" CanUserClose="False">
            <Button Content="C" />
        </telerikDocking:RadPane>
        <telerikDocking:RadPane Header="e">
            <Button Content="C" />
        </telerikDocking:RadPane>
    </telerikDocking:RadPaneGroup>
</telerikDocking:RadSplitContainer>

As the property says it is not absolute size - it is relative size. This means that the whole width/height of the split container will be divided in such way that will keep the proportion between its children.

About the other question - you can set footers by changing the ContentTemplate of the Pane. If you want to set footer for all the panes in the Docking control you could create a custom theme for the Docking control and set this data template in it or just create a style and set it to all of your panes. Here is an example for a Style that accomplishes this task:

<Style TargetType="telerikDocking:RadPane">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <ContentPresenter Content="{Binding}" Grid.Row="0" />
                    <StackPanel Grid.Row="1" Background="LightBlue">
                        <TextBlock Text="FOOTER" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Hope this information helps.

Regards,
Miroslav Nedyalkov
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.

[Nikolay]

Hi gautham,

You cannot set Width and Height directly to the panes (this will result in changing the size of the headers). What you need to is to set the relative size of the RadPaneGroup or RadSplitContainer controls that are in a common RadSplitContainer. You can do that be setting the attached property RelativeSize of the ProportionalStackPanel class. Here is an example of what I mean:

<telerikDocking:RadSplitContainer InitialPosition="DockedTop">
    <telerikDocking:RadPaneGroup telerikDocking:ProportionalStackPanel.RelativeSize="40, 40">
        <telerikDocking:RadPane x:Name="pane1" Header="A">
            <Button Content="B" />
        </telerikDocking:RadPane>

    </telerikDocking:RadPaneGroup>

    <telerikDocking:RadPaneGroup telerikDocking:ProportionalStackPanel.RelativeSize="20, 20">
        <telerikDocking:RadPane Header="d" CanUserClose="False">
            <Button Content="C" />
        </telerikDocking:RadPane>
        <telerikDocking:RadPane Header="e">
            <Button Content="C" />
        </telerikDocking:RadPane>
    </telerikDocking:RadPaneGroup>
</telerikDocking:RadSplitContainer>

As the property says it is not absolute size - it is relative size. This means that the whole width/height of the split container will be divided in such way that will keep the proportion between its children.

About the other question - you can set footers by changing the ContentTemplate of the Pane. If you want to set footer for all the panes in the Docking control you could create a custom theme for the Docking control and set this data template in it or just create a style and set it to all of your panes. Here is an example for a Style that accomplishes this task:

<Style TargetType="telerikDocking:RadPane">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <ContentPresenter Content="{Binding}" Grid.Row="0" />
                    <StackPanel Grid.Row="1" Background="LightBlue">
                        <TextBlock Text="FOOTER" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Hope this information helps.

Regards,
Nick
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.

[gautham]

Hi Telerik Team,

Thanks for your reply. My first issue has been resolved byyour advise. Refer 2^nd issue, i.e. Footer. I have implemented yourcode snippet in xaml, now I get footer working. But it is not displaying thedatagrid which I had put inside pane. It is displaying  Name of the bound view model in place of thedatagrid.  Please advise.

Thanks,

Gautham

[Miroslav Nedyalkov]

Hello gautham,

What I suspect is that you set your view model as DataContext of the ContentPresenter somehow (directly or by setting it as DataContext of an element upper in the visual tree). It would be very helpful if you could provide us with the XAML that produces this issue.

Regards
Miroslav Nedyalkov
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.

[gautham]

	Hello Telrik Team,  1) "Line number 17-33", Footer targeted on style for RadPane. 2) "Line number 49", I included a style as( <telerikDocking:RadPane  Style="{StaticResource RadPaneStyle}"...). 4) When I remove style binding of datagrid present in "line number 51" take place properly, It will not work when I include the style, but footer will appear. 4) But the problem is that I want both: Footer, Datagrid. This is my code: <qsf:Example
	xmlns:qsf="clr-namespace:Telerik.Windows.QuickStart;assembly=Telerik.Windows.QuickStart"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
	xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
	xmlns:telerikDocking ="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
	xmlns:telerikControl="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
	xmlns:dateControl="clr-namespace:Forte.UI.Controls.DateControl;assembly=Forte.UI.Controls"
	xmlns:converters="clr-namespace:Forte.UI.Infrastructure.Converters;assembly=Forte.UI.Infrastructure"
	xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data" xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" xmlns:Telerik_Windows_Controls_Primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Navigation" xmlns:Telerik_Windows_Controls_Primitives1="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls" x:Class="Forte.UI.Modules.Configure.Views.FlightEntryDisplayView"
	>
	<qsf:Example.Resources>
	<converters:EntityToIdConverter x:Key="ComboBoxConverter"/>
	<converters:DateConverter x:Key="dateConverter"/>
	<Style x:Key="RadPaneStyle"  TargetType="telerikDocking:RadPane">
	<Setter Property="ContentTemplate">
	<Setter.Value>
	<DataTemplate>
	<Grid>
	<Grid.RowDefinitions>
	<RowDefinition Height="*" />
	<RowDefinition Height="30" />
	</Grid.RowDefinitions>
	<ContentPresenter x:Name="ControlPresenter" Content="{Binding}"  Grid.Row="0"/>
	<StackPanel Grid.Row="1" Background="LightBlue">
	<TextBlock Text="FOOTER" />
	</StackPanel>
	</Grid>
	</DataTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	</qsf:Example.Resources>
	<Grid Height="470" Width="1000">
	<Grid.RowDefinitions>
	<RowDefinition Height="10" />
	<RowDefinition/>
	<RowDefinition Height="40"/>
	</Grid.RowDefinitions>
	<telerikDocking:RadDocking  Grid.Row="1">
	<telerikDocking:RadSplitContainer  ScrollViewer.HorizontalScrollBarVisibility="Auto" Orientation="Vertical" InitialPosition="DockedLeft"  Height="400"  Width="980">
	<telerikDocking:RadPaneGroup   telerikDocking:ProportionalStackPanel.RelativeSize="40, 40">
	<telerikDocking:RadPane  Style="{StaticResource RadPaneStyle}" Header="Schedule" Title="{Binding Header, Mode=TwoWay}">
	<data:DataGrid Grid.Row="0"  x:Name="uxEntityDataGrid"  AutoGenerateColumns="False"
	ItemsSource ="{Binding EntityCollection, Mode=TwoWay}"
	SelectedIndex ="{Binding SelectedIndex, Mode=TwoWay}"
	SelectedItem="{Binding SelectedItem, Mode=TwoWay}" HorizontalScrollBarVisibility="Visible"  VerticalAlignment="Top">
	<data:DataGrid.Columns>
	<data:DataGridTemplateColumn Header="Equip Type">
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<TextBlock  Text="{Binding EquipmentTypeCode}" Style="{StaticResource TextBlockStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	<data:DataGridTemplateColumn.CellEditingTemplate>
	<DataTemplate>
	<ComboBox ItemsSource="{Binding EquipmentTypes}"
	x:Name="uxEquipmentTypes"
	DisplayMemberPath="Code"
	SelectedItem="{Binding EquipmentTypeId, Converter={StaticResource ComboBoxConverter}, ConverterParameter=EquipmentTypes, Mode=TwoWay}"
	Style="{StaticResource DataGridComboBoxStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellEditingTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn Header="Designator">
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<TextBlock  Text="{Binding DesignatorCode}" Style="{StaticResource TextBlockStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	<data:DataGridTemplateColumn.CellEditingTemplate>
	<DataTemplate>
	<ComboBox ItemsSource="{Binding Designators}"
	x:Name="uxDesignators"
	DisplayMemberPath="Code"
	SelectedItem="{Binding DesignatorId, Converter={StaticResource ComboBoxConverter}, ConverterParameter=Desgnators, Mode=TwoWay}"
	Style="{StaticResource DataGridComboBoxStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellEditingTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTextColumn Header="Flight" Binding="{Binding Flight, Mode=TwoWay}" CanUserResize="False" IsReadOnly="True"/>
	<data:DataGridTemplateColumn  Header="Instance Date">
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<TextBlock  x:Name="uxInstanceDate" Text="{Binding To, Converter={StaticResource dateConverter}, ConverterParameter=\{0:d\}, Mode=TwoWay}" Style="{StaticResource TextBlockStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	<data:DataGridTemplateColumn.CellEditingTemplate>
	<DataTemplate>
	<controls:DatePicker  x:Name="uxInstanceDate" SelectedDate="{Binding To, Mode=TwoWay}" Style="{StaticResource DatePickerStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellEditingTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn  Header="Effective From">
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<TextBlock  x:Name="uxEffectiveFrom" Text="{Binding EffectiveFrom, Converter={StaticResource dateConverter}, Mode=TwoWay}" Style="{StaticResource TextBlockStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	<data:DataGridTemplateColumn.CellEditingTemplate>
	<DataTemplate>
	<controls:DatePicker  x:Name="uxEffectiveFrom" SelectedDate="{Binding EffectiveFrom, Mode=TwoWay}" Style="{StaticResource DatePickerStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellEditingTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn  Header="Effective To">
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<TextBlock  x:Name="uxEffectiveTo" Text="{Binding EffectiveTo, Converter={StaticResource dateConverter}, Mode=TwoWay}" Style="{StaticResource TextBlockStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	<data:DataGridTemplateColumn.CellEditingTemplate>
	<DataTemplate>
	<controls:DatePicker  x:Name="uxEffectiveTo" SelectedDate="{Binding EffectiveTo, Mode=TwoWay}" Style="{StaticResource DatePickerStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellEditingTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn Header="Route">
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<TextBlock x:Name="uxRoute" Text="{Binding RouteName}" Style="{StaticResource TextBlockStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	<data:DataGridTemplateColumn.CellEditingTemplate>
	<DataTemplate>
	<ComboBox ItemsSource="{Binding Routes}"
	x:Name="uxRoutes"
	DisplayMemberPath="Name"
	SelectedItem="{Binding RouteId, Converter={StaticResource ComboBoxConverter}, ConverterParameter=Routes, Mode=TwoWay}"
	Style="{StaticResource DataGridComboBoxStyle}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellEditingTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTextColumn Header="STD"  x:Name ="uxSTD" Binding="{Binding DepartureScheduledTime, Mode=TwoWay}" CanUserResize="False" IsReadOnly="True"/>
	<data:DataGridTextColumn Header="STA"  x:Name="uxSTA" Binding="{Binding ArrivalScheduledTime, Mode=TwoWay}" CanUserResize="False" IsReadOnly="True"/>
	<data:DataGridTemplateColumn  x:Name="uxDow" Header="Days of week" >
	<data:DataGridTemplateColumn.HeaderStyle>
	<Style TargetType="dataprimitives:DataGridColumnHeader">
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="dataprimitives:DataGridColumnHeader">
	<Grid Margin="3" >
	<Grid.RowDefinitions>
	<RowDefinition Height="auto"/>
	<RowDefinition Height="auto"/>
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0"  Text="Days Of Week" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<Grid MaxHeight="20" Grid.Row="1">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="23"/>
	<ColumnDefinition Width="23"/>
	<ColumnDefinition Width="23"/>
	<ColumnDefinition Width="23"/>
	<ColumnDefinition Width="23"/>
	<ColumnDefinition Width="23"/>
	<ColumnDefinition Width="23"/>
	</Grid.ColumnDefinitions>
	<TextBlock Grid.Column="0" Text="S" Style="{StaticResource TextBlockStyle}"  HorizontalAlignment="Center"  VerticalAlignment="Center"/>
	<TextBlock Grid.Column="1" Text="M" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<TextBlock Grid.Column="2" Text="T" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<TextBlock Grid.Column="3" Text="W" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<TextBlock Grid.Column="4"  Text="T" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<TextBlock Grid.Column="5"  Text="F" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	<TextBlock  Grid.Column="6" Text="S" Style="{StaticResource TextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	</Grid>
	</Grid>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	</data:DataGridTemplateColumn.HeaderStyle>
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<dateControl:DateControl  x:Name="Dob" SundayCheckBoxValue="{Binding SundayOperation, Mode=TwoWay}"  MondayCheckBoxValue="{Binding MondayOperation, Mode=TwoWay}" TuesdayCheckBoxValue="{Binding TuesdayOperation, Mode=TwoWay}" WednesdayCheckBoxValue="{Binding WednesdayOperation, Mode=TwoWay}" ThursdayCheckBoxValue="{Binding ThursdayOperation, Mode=TwoWay}" FridayCheckBoxValue="{Binding FridayOperation, Mode=TwoWay}" SaturdayCheckBoxValue="{Binding SaturdayOperation, Mode=TwoWay}"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTextColumn Header="OnwardFlight"  x:Name="uxOnwordFlight" MinWidth="120" MaxWidth="120" Binding="{Binding NextFlightId}" CanUserResize="False" IsReadOnly="True"/>
	<data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<HyperlinkButton Content="Add another flight to sequence" MinWidth="150" Foreground="Maroon"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	</data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn>
	<data:DataGridTemplateColumn.CellTemplate>
	<DataTemplate>
	<HyperlinkButton Content="View flight information" MinWidth="150" Foreground="Maroon"/>
	</DataTemplate>
	</data:DataGridTemplateColumn.CellTemplate>
	</data:DataGridTemplateColumn>
	</data:DataGrid.Columns>
	</data:DataGrid>
	</telerikDocking:RadPane>
	</telerikDocking:RadPaneGroup>
	<telerikDocking:RadPaneGroup telerikDocking:ProportionalStackPanel.RelativeSize="20, 20">
	<telerikDocking:RadPane Header="GanttChart" Title=""/>
	</telerikDocking:RadPaneGroup>
	<telerikDocking:RadPaneGroup telerikDocking:ProportionalStackPanel.RelativeSize="20, 20">
	<telerikDocking:RadPane  Header="PlayPen" Title=""/>
	</telerikDocking:RadPaneGroup>
	</telerikDocking:RadSplitContainer>
	</telerikDocking:RadDocking>
	<telerikControl:HeaderedContentControl Grid.Row="2">
	<Border  BorderBrush="Black" BorderThickness="3">
	<TextBlock  TextWrapping="Wrap"  Text="{Binding Path=Footer, Mode=OneWay}"/>
	</Border>
	</telerikControl:HeaderedContentControl>
	</Grid>
	</qsf:Example>                                    Thankyou for your kind help, Your's, Gautham.

[Miroslav Nedyalkov]

Hi gautham,

I found out that this won't work if you have visual element as content. I apologize for the caused inconvenience. The attached project accomplishes the task. It uses additional ContentControl with custom ControlTemplate that will display both the content and the footer.

Hope this helps.

Kind regards,
Miroslav Nedyalkov
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.

[gautham]

Hello Telerik Team,

           Thanks for your support. It's working.

             your's Gautham.