This is a migrated thread and some comments may be shown as answers.

RadDock inside another

5 Answers 103 Views

Dock

This is a migrated thread and some comments may be shown as answers.

Andrew asked on 17 Jun 2013, 04:43 PM

When placing a radDock inside of another the other RadDock automatically takes on the skin of the prior dock and becomes distorted. See the code below. Need to either have a different skin or not become distorted.

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout1"

StoreLayoutInViewState="true">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td valign="top" width="62%">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZoneTopLeft"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="NetVigour" EnableEmbeddedSkins="false" EnableViewState="true"

Visible="true" ID="dockExchangeInformation" DockMode="Docked" runat="server"

Title="Exchange Information" Font-Bold="true" Width="100%" EnableAnimation="true"

Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

<p>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout2"

StoreLayoutInViewState="true">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZone1"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Sunset" EnableEmbeddedSkins="false" EnableViewState="true"

Visible="true" ID="RadDock1" DockMode="Docked" runat="server" Title="Exchange Information"

Font-Bold="true" Width="100%" EnableAnimation="true" Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

test

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

5 Answers, 1 is accepted

answered on 18 Jun 2013, 02:23 PM

Hi,

As I could see from your code, your are using custom skins. I have tried the same code with the embedded Default and sunset skins and everything works as expected: both skins - the outer and the inner looks fine based on the chosen skin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout1"

StoreLayoutInViewState="true">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td valign="top" width="62%">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZoneTopLeft"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Default" EnableViewState="true"

Visible="true" ID="dockExchangeInformation" DockMode="Docked" runat="server"

Title="Exchange Information" Font-Bold="true" Width="100%" EnableAnimation="true"

Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

<p>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout2"

StoreLayoutInViewState="true">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZone1"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Sunset" EnableViewState="true"

Visible="true" ID="RadDock1" DockMode="Docked" runat="server" Title="Exchange Information"

Font-Bold="true" Width="100%" EnableAnimation="true" Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

test

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

</form>

</body>

</html>

Try to use embedded skins to see if it works fine for you. Then switch back to custom skins, and if there is some issues when you are using custom skins, then the problem is inside them.

Regards,
Bozhidar
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 26 Jun 2013, 01:20 PM

Hello,

The code provided in my previous post is an example of two nested dock with different skins based on you code and everything works as expected. This is a short video file showing my example and the result in the browser. I even nested 4 Docks with 4 differetn skins and each dock has its own skin without to break the styles of the other docks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout1"

StoreLayoutInViewState="true">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td valign="top" width="62%">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZoneTopLeft"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Default" EnableViewState="true" Visible="true" ID="dockExchangeInformation"

DockMode="Docked" runat="server" Title="Exchange Information" Font-Bold="true"

Width="100%" EnableAnimation="true" Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

<p>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout2"

StoreLayoutInViewState="true">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZone1"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Black" EnableViewState="true" Visible="true" ID="RadDock1"

DockMode="Docked" runat="server" Title="Exchange Information" Font-Bold="true"

Width="100%" EnableAnimation="true" Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout3"

StoreLayoutInViewState="true">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZone2"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Sunset" EnableViewState="true" Visible="true" ID="RadDock2"

DockMode="Docked" runat="server" Title="Exchange Information" Font-Bold="true"

Width="100%" EnableAnimation="true" Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

<telerik:RadDockLayout EnableViewState="true" runat="server" ID="RadDockLayout4"

StoreLayoutInViewState="true">

<telerik:RadDockZone EnableViewState="true" BorderStyle="None" ID="RadDockZone3"

runat="server" Orientation="Vertical" MinHeight="500px">

<telerik:RadDock Skin="Forest" EnableViewState="true" Visible="true" ID="RadDock3"

DockMode="Docked" runat="server" Title="Exchange Information" Font-Bold="true"

Width="100%" EnableAnimation="true" Resizable="false">

<Commands>

<telerik:DockExpandCollapseCommand />

</Commands>

<ContentTemplate>

test

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

</form>

</body>

</html>

Regards,
Bozhidar
Telerik

answered on 15 Oct 2013, 06:07 PM

Sorry for taking so long to get back on this but I have had many other projects come up. Your example is a perfect way to show that custom skins do not work. If you remove the "forest" skin and replace it with skin="NameOfCustom" and EnableEmbeddedSkins="false" then the skin will show up as whatever the parent Dock's skin is. Furthermore, if I move the custom skin dock inside a different dock it inherits that skin. Even more bazar is if I move it out of all the docks the skin does in fact show up correct. Even more strange is if I put two docks with the NameOfCustom skin and have one inside the other it shows up strange just like I described. So please try this with a custom skin and let me know if you do not reproduce this issue.

Thanks,
Trevor

answered on 16 Oct 2013, 07:06 AM

01-CustomSkinDock.zip

DockCustom.jpg

Hi,

I have tested the same code scenario with four different skins. And again, everything works as expected. Attached are the project and a screenshot showing the four different nested skins.

We have provided already two examples - with embedded and custom skin and found it works fine both ways. If you are still experiencing issues we will need a simple sample runnable project, so we would be able to test it locally.

Regards,
Bozhidar
Telerik