Drag&Drop Docking in Document Host

[Dennys]

I have a DocumentHost with some Panes bound to a PaneGroup. Everything works well, except when I want to Drag a Pane for Docking it, as soon as I grabbed the tab and want to drag it, an error message "System.ArgumentException was unhandled / Message: This pane cannot be removed from parent, because it doesn't have one!" appears. What is my mistake here?
Thanks for your support :)
Best regards

<!-- Tabs -->
<telerik:RadDocking.DocumentHost>
    <telerik:RadSplitContainer Margin="0,-3,0,0" BorderThickness="1">
        <telerik:RadPaneGroup TabStripPlacement="Top"
                              ItemsSource="{Binding Tabs}"
                              Background="#FFF0F0F0"
                              BorderThickness="1"
                              BorderBrush="#FF868686">
            <telerik:RadPaneGroup.ItemContainerStyle>
                <Style TargetType="telerik:RadPane">
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="CanUserClose" Value="False" />
                    <Setter Property="CanFloat" Value="True" />
                    <Setter Property="CanUserPin" Value="False" />
                    <Setter Property="ContextMenuTemplate" Value="{x:Null}" />
                </Style>
            </telerik:RadPaneGroup.ItemContainerStyle>
            <telerik:RadPaneGroup.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <StackPanel.Resources>
                            <Style TargetType="{x:Type Ellipse}">
                                <Setter Property="Width" Value="3"/>
                                <Setter Property="Height" Value="3"/>
                                <Setter Property="Fill" Value="Red"/>
                                <Setter Property="Margin" Value="3,0,3,0"/>
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock Text="{Binding Title}" />
                        <Ellipse Visibility="{Binding IsDirty, Converter={StaticResource BooleanToVisibilityConverter}}" />
                        <Button Command="{Binding CloseCommand}"
                        Width="12" Height="12" Margin="4,0,0,0" ToolTipService.ToolTip="Close Tab">
                            <Button.Content>
                                <Path Data="M0,0 L6,6 M6, 0 L0,6" Stroke="Black" StrokeThickness="0.5" />
                            </Button.Content>
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </telerik:RadPaneGroup.ItemTemplate>
            <telerik:RadPaneGroup.ContentTemplate>
                <DataTemplate>
                    <Views:ClientDetails
                    DataContext="{Binding}" IsDirty="{Binding IsDirty,Mode=TwoWay}" />
                </DataTemplate>
            </telerik:RadPaneGroup.ContentTemplate>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>

[Konstantina]

Hello Dennys,

Thank you for the code snippet.

That is because you are setting properties, which are not supported by the RadDocking control. For a full list please refer to this help article: http://www.telerik.com/help/wpf/not-supported-properties.html

Please let us know if you have further questions.

Regards,
Konstantina
the Telerik team

[Dennys]

Ok I see. What is the best way then to bind a ObservableCollection to a PaneGroup with docking still possible? I can bind data with ItemsSource into a DocumentHost and the Tabs appear as desired, i just can't dock them. 

[Konstantina]

Hi Dennys,

Instead of the ItemsSource property you can use the Items collection to add items to the Docking control.

Best wishes,
Konstantina
the Telerik team

[Ryan]

Is there an xxample of available for binding the items?

[Konstantina]

Hello Ryan,

Please find attached a sample application in which is illustrated how to implement the MVVM pattern with the RadDocking control.

Hope this helps.

Greetings,
Konstantina
the Telerik team

[Jegan]

Hi Konstantina,
I had similar problem as Dennys and I was able to solved using your example project, however, I have an additional issue with the PaneGroupExtension class.

When individual panes are closed, this doesn't effect the group or the item source, although the view has been closed but the itemsource still contains the closed pane. Is there any events available in the PaneGroupExtension that could be used to remove the closed panes?

Regards
Jegan

[Nasko]

Hello Jegan,

When RadPane is being closed it actually gets hidden - the IsHidden property is set to True. This is by design - more information you could find here. So, what you need to do is to manually remove the Pane from the collection using the Close event of RadDocking as shown below:

private void RadDocking_Close(object sender, Telerik.Windows.Controls.Docking.StateChangeEventArgs e)
{
    foreach (RadPane pane in e.Panes)
    {
        this.panes.Remove(pane.DataContext as PaneViewModel);
    }
}

Hopes this helps.

Regards,
Nasko
Telerik

 

 

[Jegan]

Thanks Nasko,

It worked very well.

I have another question in thread below relating to RadPane is not being updated.

http://www.telerik.com/forums/raddocking

Would you be able to give me a solution for this please?

[Jegan]

Thanks Nasko,

It worked very well.

I have another question in thread below, related to Rad Pane is not being updated.

http://www.telerik.com/forums/raddocking

Would you be able to provide me a solution? 

[Nasko]

Hello Jegan,

I am glad the proposed approach worked for you.

As for your second question I have already replied you in the other forum thread.

Hopes this helps.

Regards,
Nasko
Telerik