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
0
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:
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
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.
0
Andrew
Top achievements
Rank 1
Rank 1
answered on 25 Jun 2013, 12:14 AM
I have tried the "Default" Skin and the "Sunset" skin on the docks respectively (Default is the outer and Sunset the inner) and both the inner and the outer dock have the Default skin. It seems to be inheriting the outer skin. If you are not seeing this behavior please give me an example.
Thanks again,
Trevor
Thanks again,
Trevor
0
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:
Regards,
Bozhidar
Telerik
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
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.
0
Andrew
Top achievements
Rank 1
Rank 1
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
Thanks,
Trevor
0
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
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
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.