RadDock inside another

6 posts, 0 answers
  1. Andrew
    Andrew avatar
    14 posts
    Member since:
    Apr 2009

    Posted 17 Jun 2013 Link to this post

    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>
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 18 Jun 2013 Link to this post

    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">
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    14 posts
    Member since:
    Apr 2009

    Posted 24 Jun 2013 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 26 Jun 2013 Link to this post

    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">
    <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.
  6. Andrew
    Andrew avatar
    14 posts
    Member since:
    Apr 2009

    Posted 15 Oct 2013 Link to this post

    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
  7. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 16 Oct 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017