Docks with custom skins

8 posts, 0 answers
  1. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 11 May 2008 Link to this post

    Dear All,

    I want to apply the Sunset skin to my docks and zones, so I copied the included skin from the .zip file to App_thems/Sunset/Dock and did the needed modifications to make it work with my skin switching mechanism.

    Everything is fine, except that the dock command buttons showed clipped, when I click once on the title bar of the dock the command buttons are correctly displayed, what could be the reason.

    Also for telerik skin, I the pictures are not displayed at all.

    Can someone guide me on this...

    Best regards,
    Waleed

    /Edit : 05-11-2008 9:12am
    I also try to use the default skin by disabling the dynamic skinning, and I got the same result

    Best regards,
    Waleed
  3. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 13 May 2008 Link to this post

    Hi Waleed,

    Thank you for your feedback. We highly appreciate it.

    I was able to reproduce the dock commands clipping problem with the code you have sent us in the support ticket referring to the same issues. It is due to a problem in the repainting of the RadDock when it has been invisible. The problem has already been fixed and will be available in SP1 Q1 2008 which is scheduled for the end of this week. For the time being I suggest you add the following script
    <script type="text/javascript">  
    Telerik.Web.UI.RadDock.prototype.repaint = function()  
    {  
        this._repaintHelper();                          
    };  
    </script>   
    at the end of the page.

    Regarding the other problem you mention that the dock control loses most of its appearance when you apply telerik or outlook themes the issue is due to having added a DockLayout folder to these themes (which does not contain correct css settings as well as the file nesting in it is not correct) while in the Sunset and Web20 themes which are applied correctly there is no DockLayout folder. Please, remove the DockLayout folder from all themes or change the content of the DockLayout folder with that of the Dock folder.

    If you need further assistance, do contact us again.

    All the best,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 14 May 2008 Link to this post

    Hello Sophy,

    As expected from telerik team, your reply was fast and at the point.

    If you allow me, I have another issue, you can re-produce with the same example.

    The left and right Docks both reside in RadSplitter Panes and I notice when resizing the IE window, they are not well positioned in there panes
    I have a resolution of (1400x1050) I know it is not suitable for the development anyway could you help me on this.

    Thanks for your effective reply and best regards
    Waleed

    /Edit : 05-14-2008
    Aslo if possible I would like to remove the padding/margin for the Zone arround the docks.

    Best regards,
    Waleed
  7. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 15 May 2008 Link to this post

    Hello Waleed,

    The problem concerning RadDocks not being well positioned when resizing browser's window is due to the positioning of the RadPanes and the RadDockZones. To solve the problem you should set the position attribute of the content DOM element of the RadPane to relative, e.g.:
    <telerik:RadSplitter ID="RadNested" runat="server" onclientloaded="setPosition">  
    ...  
    </telerik:RadSplitter> 
    <script type="text/javascript">  
    function setPosition()  
    {  
        $find("<%=NestedPane3.ClientID%>").getContentElement().style.position = "relative";  
    }  
    </script> 

    Please, note that you will need to do the above for all panes containing RadDockZones with RadDocks.

    You can remove the space around the docks inside a RadDockZone adding the following style:
    <style type="text/css">  
    .raddockzone  
    {  
        padding: 0px !important;  
    }  
    .raddock  
    {  
        margin: 0px !important;  
    }  
    </style> 

    If you have other questions, do contact us again.

    Best regards,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8.
  9. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 18 May 2008 Link to this post

    Hello Sophy,

    I have the splitter and the panes on a master page and the dock control on a user control that been loaded on any option on the page.

    Dock:
    The space around the docks was fixed ....

    Panes:
    I did add the setPosition function to the splitter and still have the same issue when resizing the IE window...
    here is my aspx script:
    <%@ Import namespace="Telerik.Web.UI"%> 
    <%@ Master Language="C#" AutoEventWireup="true" Inherits="Trade_MasterPage" Codebehind="Trade_MasterPage.master.cs" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register Src="Controls/Header.ascx" TagName="Header" TagPrefix="ucHdr" %> 
    <%@ Register Src="Controls/Navigation.ascx" TagName="Navigation" TagPrefix="ucNav" %> 
    <%@ Register Src="Controls/DocksandZone.ascx" TagName="DocksPart" TagPrefix="ucDocks" %> 
    <%@ Register Src="Controls/UserPanel.ascx" TagName="UserSettings" TagPrefix="ucUserOptions" %> 
    <%@ Register Src="Controls/RightSideOptions.ascx" TagName="RightOpt" TagPrefix="ucRightOptions" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    <html style="height: 100%; margin: 0px;" xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Site Layout</title> 
    </head> 
     
    <body style="height: 100%; margin: 0px;" scroll="no">  
        <form id="form1" runat="server" style="height: 100%; margin: 0px;">  
            <asp:ScriptManager ID="ScriptManager" runat="server" /> 
            <telerik:RadAjaxManager ID="RadMgr" runat="server"></telerik:RadAjaxManager> 
            <telerik:RadSplitter ID="Radsplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal" SkinID="Splitter">  
                <telerik:RadPane ID="TopMost" runat="server" Height="135px" Scrolling="None" > 
                    <ucHdr:Header id="Header1" runat="server"></ucHdr:Header> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBarfirst" Visible="false" runat="server" CollapseMode="None" EnableResize="false"></telerik:RadSplitBar> 
                <telerik:RadPane ID="BottonPane" runat="server" Width="100%" Height="100%" Scrolling="None">  
                    <telerik:RadSplitter ID="RadNested" runat="server" Orientation="Vertical" Height="100%" Width="100%" SkinID="Splitter" onclientloaded="setPosition">  
                        <telerik:RadPane ID="NestedPane1" runat="server" Width="22" MinWidth="22" MaxWidth="22" Scrolling="None">  
                            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22" ClickToOpen="true">  
                                <telerik:RadSlidingPane ID="PropertiesPane" Title="Properties" runat="server" Scrolling="None" EnableResize="false" Width="200" TabView="TextOnly" IconUrl="/img/open.gif">  
                                    <!-- <div class="hdTitleBar">Waleed Seada</div> --> 
                                    <ucNav:Navigation ID="Navigation1" runat="server"></ucNav:Navigation> 
                                    <img src="img/spacer.gif" alt="" height="1" width="230" /> 
                                </telerik:RadSlidingPane> 
                                <telerik:RadSlidingPane ID="ControlPanelPane" Title="Control Panel" runat="server" Scrolling="None" EnableResize="false" Width="200" TabView="TextOnly" IconUrl="/img/ControlPanel.gif" SkinID="Splitter">  
                                    <ucDocks:DocksPart ID="DocksControl" runat="server"></ucDocks:DocksPart> 
                                </telerik:RadSlidingPane> 
                                <telerik:RadSlidingPane ID="LoginPane" Title="Login" runat="server" Scrolling="None" EnableResize="false" Width="200" TabView="TextOnly" IconUrl="/img/Login.gif">  
                                    <ucUserOptions:UserSettings ID="UserPanel" runat="server"></ucUserOptions:UserSettings> 
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBarLeft" runat="server" CollapseMode="Forward" EnableResize="false"></telerik:RadSplitBar> 
                        <telerik:RadPane ID="NestedPane2" runat="server" Width="730">  
                            <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" InitialDelayTime="0" BackColor="#ffffff" IsSticky="true" CssClass="loading-panel">  
                                <asp:Image ID="Image1" runat="server" BorderWidth="0px" AlternateText="Loading..." ImageUrl="~/RadControls/AJAX/Skins/Default/loading5.gif"></asp:Image> 
                            </telerik:RadAjaxLoadingPanel> 
                            <asp:Panel ID="Panelcontrolholder" runat="server" Height="300px">  
                            </asp:Panel> 
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> Place Holder One  
                            </asp:ContentPlaceHolder> 
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> Place Holder Two  
                            </asp:ContentPlaceHolder> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBarRight" runat="server" CollapseMode="Backward" EnableResize="false"></telerik:RadSplitBar> 
                        <telerik:RadPane ID="NestedPane3" runat="server" Width="170">  
                            <asp:Button runat="server" ID="Btn1" OnClick="Btn1_Clicked" /> 
                            <ucRightOptions:RightOpt ID="RightOpt1" runat="server">  
                            </ucRightOptions:RightOpt> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
    <script type="text/javascript">     
    // to resolve the issue with the docks, toolbox is not drown correctly  
    // untill next sp1 2008  
    Telerik.Web.UI.RadDock.prototype.repaint = function()     
    {     
        this._repaintHelper();                             
    };  
    // Resolve the dock position inside panes, the panes position has to be relative  
    // call it from radsplitter [onclientloaded="setPosition"]  
    function setPosition()     
    {     
        $find("<%=NestedPane1.ClientID%>").getContentElement().style.position = "relative";  
        $find("<%=NestedPane2.ClientID%>").getContentElement().style.position = "relative";  
        $find("<%=NestedPane3.ClientID%>").getContentElement().style.position = "relative";  
    };  
    </script>   

    please advice me !!

    Thanks for your reply,
    Waleed
  11. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 18 May 2008 Link to this post

    Hello Sophy,

    The docks spaces were fixed.

    The position of the docks inside the pane not ...
    I have a splitter on a masterpage with three main panes, each pane contain a user control with the docks inside.

    Here is the script:
    <%@ Import namespace="Telerik.Web.UI"%> 
    <%@ Master Language="C#" AutoEventWireup="true" Inherits="Trade_MasterPage" Codebehind="Trade_MasterPage.master.cs" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register Src="Controls/Header.ascx" TagName="Header" TagPrefix="ucHdr" %> 
    <%@ Register Src="Controls/Navigation.ascx" TagName="Navigation" TagPrefix="ucNav" %> 
    <%@ Register Src="Controls/DocksandZone.ascx" TagName="DocksPart" TagPrefix="ucDocks" %> 
    <%@ Register Src="Controls/UserPanel.ascx" TagName="UserSettings" TagPrefix="ucUserOptions" %> 
    <%@ Register Src="Controls/RightSideOptions.ascx" TagName="RightOpt" TagPrefix="ucRightOptions" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    <html style="height: 100%; margin: 0px;" xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Site Layout</title> 
    </head> 
     
    <body style="height: 100%; margin: 0px;" scroll="no">  
        <form id="form1" runat="server" style="height: 100%; margin: 0px;">  
            <asp:ScriptManager ID="ScriptManager" runat="server" /> 
            <telerik:RadAjaxManager ID="RadMgr" runat="server"></telerik:RadAjaxManager> 
            <telerik:RadSplitter ID="Radsplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal" SkinID="Splitter">  
                <telerik:RadPane ID="TopMost" runat="server" Height="135px" Scrolling="None" > 
                    <ucHdr:Header id="Header1" runat="server"></ucHdr:Header> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBarfirst" Visible="false" runat="server" CollapseMode="None" EnableResize="false"></telerik:RadSplitBar> 
                <telerik:RadPane ID="BottonPane" runat="server" Width="100%" Height="100%" Scrolling="None">  
                    <telerik:RadSplitter ID="RadNested" runat="server" Orientation="Vertical" Height="100%" Width="100%" SkinID="Splitter" onclientloaded="setPosition">  
                        <telerik:RadPane ID="NestedPane1" runat="server" Width="22" MinWidth="22" MaxWidth="22" Scrolling="None">  
                            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22" ClickToOpen="true">  
                                <telerik:RadSlidingPane ID="PropertiesPane" Title="Properties" runat="server" Scrolling="None" EnableResize="false" Width="200" TabView="TextOnly" IconUrl="/img/open.gif">  
                                    <!-- <div class="hdTitleBar">Waleed Seada</div> --> 
                                    <ucNav:Navigation ID="Navigation1" runat="server"></ucNav:Navigation> 
                                    <img src="img/spacer.gif" alt="" height="1" width="230" /> 
                                </telerik:RadSlidingPane> 
                                <telerik:RadSlidingPane ID="ControlPanelPane" Title="Control Panel" runat="server" Scrolling="None" EnableResize="false" Width="200" TabView="TextOnly" IconUrl="/img/ControlPanel.gif" SkinID="Splitter">  
                                    <ucDocks:DocksPart ID="DocksControl" runat="server"></ucDocks:DocksPart> 
                                </telerik:RadSlidingPane> 
                                <telerik:RadSlidingPane ID="LoginPane" Title="Login" runat="server" Scrolling="None" EnableResize="false" Width="200" TabView="TextOnly" IconUrl="/img/Login.gif">  
                                    <ucUserOptions:UserSettings ID="UserPanel" runat="server"></ucUserOptions:UserSettings> 
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBarLeft" runat="server" CollapseMode="Forward" EnableResize="false"></telerik:RadSplitBar> 
                        <telerik:RadPane ID="NestedPane2" runat="server" Width="730">  
                            <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" InitialDelayTime="0" BackColor="#ffffff" IsSticky="true" CssClass="loading-panel">  
                                <asp:Image ID="Image1" runat="server" BorderWidth="0px" AlternateText="Loading..." ImageUrl="~/RadControls/AJAX/Skins/Default/loading5.gif"></asp:Image> 
                            </telerik:RadAjaxLoadingPanel> 
                            <asp:Panel ID="Panelcontrolholder" runat="server" Height="300px">  
                            </asp:Panel> 
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> Place Holder One  
                            </asp:ContentPlaceHolder> 
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> Place Holder Two  
                            </asp:ContentPlaceHolder> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBarRight" runat="server" CollapseMode="Backward" EnableResize="false"></telerik:RadSplitBar> 
                        <telerik:RadPane ID="NestedPane3" runat="server" Width="170">  
                            <asp:Button runat="server" ID="Btn1" OnClick="Btn1_Clicked" /> 
                            <ucRightOptions:RightOpt ID="RightOpt1" runat="server">  
                            </ucRightOptions:RightOpt> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
    <script type="text/javascript">     
    // to resolve the issue with the docks, toolbox is not drown correctly  
    // untill next sp1 2008  
    Telerik.Web.UI.RadDock.prototype.repaint = function()     
    {     
        this._repaintHelper();                             
    };  
    // Resolve the dock position inside panes, the panes position has to be relative  
    // call it from radsplitter [onclientloaded="setPosition"]  
    function setPosition()     
    {     
        $find("<%=NestedPane1.ClientID%>").getContentElement().style.position = "relative";  
        $find("<%=NestedPane2.ClientID%>").getContentElement().style.position = "relative";  
        $find("<%=NestedPane3.ClientID%>").getContentElement().style.position = "relative";  
    };  
    </script>    
     

    If this is not enough and you want to have a look at the whole application, I don't mind send you a copy via support ticket.

    Note:I have the resoulotion of the (1400x1050)

    Thanks for your reply, I appreciate your helping
    Waleed
  13. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 19 May 2008 Link to this post

    Hello Waleed,

    I tested the code you have sent us and could not find anything wrong with docks' positioning inside their panes. For your convenience I have attached a video demonstrating my testing process. Please, send us some screenshots or a video demonstrating what is the problem you observe when resizing browser's window. We will be glad to help you.

    Kind regards,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  14.
  15. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 19 May 2008 Link to this post

    Hello Sohpy,

    I opened a support ticket that shows the behavior I express.
    Number: 138773

    Thanks and best regards,
    Waleed
Back to Top