Rad Dock Problems while updating to new version

[Moustafa]

Hi Telerik Team

I'm upgrade from Q3 2008 to Q3 2009 and faces some problem in the rad dock

1- the command buttons disappeared , in Q3 2008 I used the folllowing style to display the command

 

 

.RadDockCloseCommand

 

{

 

 

width: 25px;

 

 

 

height:25px;

 

 

 

cursor:pointer;

 

 

 

cursor:hand;

 

 

 

background:url(../common/Image/portal/close.gif) transparent !important;

 

}

and the same for RadDockExpandCommand,RadDockCollapeCommand
2- there is a space [nearly 5 to 10 pixels] between the dock and the inner control [left and right sides] which was not in the earlier versions.
3- the rad scheduler in rad dock overflow the container dock 

you can have a look at this image to the the bugs  visually
http://www.4shared.com/photo/oT1PeWR8/Portal.html

many thanks for telerik support team


Tools

• asp.net 3.5
• IE 8
• Rad controls for asp.net ajax
• windows 7 operating system

[Pero]

Hi Moustafa,

Two major changes have been introduced into the RadDock control, since Q3 2008.

1. Q1 2009: With Q1 2009 we have completely redesigned the skins of all the RadControls including RadDock. New naming convention was introduced, which aims for a uniformity of the appearance of all controls in the suite in the cases they are used to build RIAs.
2. Q3 2009: With Q3 2009 a new and improved rendering of the control was introduced, that solves a number of issues, reported previously by our customers (rounded corners, support for nested zones, improved resizing of the control, optimized client-side code). This, however, causes the custom skins from the previous versions to not work with the current rendering.

Now, regarding your problems:

1. The CSS classes that style the commands have been changed in Q1 2009. Here are the new classes for the docks commands:
   .rdClose - Close command

   .rdCollapse - Collapse state of ExpandCollapse command
   .rdExpand - Expand state of ExpandCollapse command
   .rdPin - Pinned state of PinUnpin command
   .rdUnpin - Unpinned state of PinUnpin command
   Basically, the styles for the Close command will look like the following:
   

   <style type="text/css">
       .rdClose
       {
           width: 25px;
           height: 25px;
           cursor: pointer;
           background: url(../common/Image/portal/close.gif) transparent !important;
       }
   </style>

   
   Here is an article that explains all the CSS class selectors applied to the dock: http://www.telerik.com/help/aspnet-ajax/dock_appearancecssselectors.html
2. The spacing around the dock can be removed by applying the following CSS code to the page containing the docks:
   

   <style type="text/css">
       .rdMiddle .rdLeft, .rdMiddle .rdRight, .rdTop .rdLeft, .rdTop .rdRight, .rdBottom .rdRight, .rdBottom .rdCenter, .rdBottom .rdLeft
       {
           display: none !important;
       }
       .rdTitleBar EM
       {
           padding-right: 5px !important;
       }
   </style>

3. I believe the problem is not related to our control, but to the Internet Explorer browser as described: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/. Apply position:relatvie to the container <div/> and the problem should disappear:
   

   .rdContent
   {
       position: relative !important;
   }

   
   

Kind regards,
Pero
the Telerik team

[Moustafa]

First many thanks for your efforts and detailed description of hte problems

1-Dock Command Buttons
 I do my best and folow up your detailed steps but the rad dock command buttons still hidden and not appear
this is a sample dock  that I use

 

<telerik:RadDock runat="server" ID="RadDockClassTime" ForbiddenZones="RadDockZone1,RadDockZone2" DockMode="Docked" Width="800px" style="background-color :White;border-style:solid;border-width:2px;border-color:#9de7ff;" >

<Commands>

<telerik:DockCommand CssClass="RadDockCloseCommand" Text="اغلاق" ClientTypeName="Telerik.Web.UI.DockCloseCommand" />

<telerik:DockToggleCommand CssClass="rdExpand" AlternateCssClass="rdCollapse" Text="تصغير" AlternateText="تكبير" ClientTypeName="Telerik.Web.UI.DockExpandCollapseCommand" />

</Commands>

<TitlebarTemplate>

<uc1:UC_RadDockHeader ID="UC_RadDockHeader1" runat="server" HeaderText="جدولي" HeaderTextColor="White" BgColor="#9de7ff" BackgroundImageUrl="../common/image/portal/header/tab03.png" />

</TitlebarTemplate>


<ContentTemplate>

<div id="Div1" runat="server" style="height:250px" >

<uc14:UC_ClassTime ID="UC_ClassTime1" runat="server" />

</div>

</ContentTemplate>

</telerik:RadDock>

2-The spacing around the dock 

thanks alot your suggestions  solved this issues perfectly.

3-overflow  of the Rad Dock

I applead the style .rdContent and solved the problem but causes another issue
when moving the dock from one zone to another it causes the content of some docks to be disappeared

 

 

[Pero]

Hi Moustafa,

1. This problem is caused from the fact that you are placing a "display: block" element in the TitlebarTemplate of the RadDock. Please, wrap the content of the TitlebarTemplate inside a <div/> and set either "float:left" or "float:right" (depending on whether the direction is RTL or LTR) to the div. Your markup should look like the following:

<telerik:RadDock runat="server" ID="RadDockClassTime" DockMode="Default" Width="300px"
    Style="background-color: White; border-style: solid; border-width: 2px; border-color: #9de7ff;">
    <Commands>
        <telerik:DockCommand CssClass="RadDockCloseCommand" Text="اغلاق" ClientTypeName="Telerik.Web.UI.DockCloseCommand" />
        <telerik:DockToggleCommand CssClass="rdExpand" AlternateCssClass="rdCollapse" Text="تصغير"
            AlternateText="تكبير" ClientTypeName="Telerik.Web.UI.DockExpandCollapseCommand" />
    </Commands>
    <TitlebarTemplate>
        <div style="float: right;">
            جدولي
            <img src="img/BackGround.png" width="20px" height="20px" alt="img" />
        </div>
    </TitlebarTemplate>

2. I am glad the second issue has been resolved.

3. I couldn't reproduce this issue with the following code:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
        .rdClose, .RadDockCloseCommand
        {
            width: 25px;
            height: 25px;
            cursor: pointer;
            background: url(img/customclose.png) transparent !important;
        }
        .rdMiddle .rdLeft, .rdMiddle .rdRight, .rdTop .rdLeft, .rdTop .rdRight, .rdBottom .rdRight, .rdBottom .rdCenter, .rdBottom .rdLeft
        {
            display: none !important;
        }
        .rdTitleBar EM
        {
            padding-right: 5px !important;
        }
        .rdContent
        {
            position: relative;
        }
        .RadDockZone
        {
            float:right;
        }
    </style>
</head>
<body dir="rtl">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                    Height="100px">
                    <ContentTemplate>
                        <div style="position: relative;">
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock runat="server" ID="RadDockClassTime" DockMode="Default" Width="300px"
                    Style="background-color: White; border-style: solid; border-width: 2px; border-color: #9de7ff;">
                    <Commands>
                        <telerik:DockCommand CssClass="RadDockCloseCommand" Text="اغلاق" ClientTypeName="Telerik.Web.UI.DockCloseCommand" />
                        <telerik:DockToggleCommand CssClass="rdExpand" AlternateCssClass="rdCollapse" Text="تصغير"
                            AlternateText="تكبير" ClientTypeName="Telerik.Web.UI.DockExpandCollapseCommand" />
                    </Commands>
                    <TitlebarTemplate>
                        <div style="float: right;">
                            جدولي
                            <img src="img/BackGround.png" width="20px" height="20px" alt="img" />
                        </div>
                    </TitlebarTemplate>
                    <ContentTemplate>
                        <div id="Div1" runat="server" style="height: 250px">
                            <br />
                            <br />
                            <br />
                            Content
                            <br />
                            <br />
                            <br />
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px">
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Could you please send a sample project, or additional source code that will help us recreate the issue locally?

Greetings,
Pero
the Telerik team

[Moustafa]

Hi  Pero

thanks very much for your conscerns and help

1- I  would like to inform u that I use asp net user control as  the content of the TitleBarTemplate and your suggestions solve the problem only and only if the content of TitleBarTemplate is direct html controls and not asp net user controls although I surround the content with the DIV element.

  <telerik:RadDockZone runat="server" ID="RadDockZone0" Orientation="Vertical" FitDocks="true" style="border: 0px;width:800px;max-width:800px"   >
                        <telerik:RadDock runat="server" ID="RadDockClassTime" ForbiddenZones="RadDockZone1,RadDockZone2" DockMode="Docked" Width="800px" style="background-color :White;border-style:solid;border-width:2px;border-color:#9de7ff;"  >
                        <Commands>
                            <telerik:DockCommand CssClass="rdClose"  Text="اغلاق"   ClientTypeName="Telerik.Web.UI.DockCloseCommand" />
                            <telerik:DockToggleCommand CssClass="rdExpand" AlternateCssClass="rdCollapse" Text="تصغير" AlternateText="تكبير"   ClientTypeName="Telerik.Web.UI.DockExpandCollapseCommand" />
                        </Commands>
                        <TitlebarTemplate>
                            <div style="float: left;">
                                <uc1:UC_RadDockHeader ID="UC_RadDockHeader1" runat="server" HeaderText="جدولي" HeaderTextColor="White" BgColor="#9de7ff" BackgroundImageUrl="../common/image/portal/header/tab03.png" />
                            </div>
                        </TitlebarTemplate>

                        <ContentTemplate>
                            <div id="Div1" runat="server" style="height:250px" >
                               <uc14:UC_ClassTime ID="UC_ClassTime1" runat="server" />
                            </div>
                        </ContentTemplate>
                    </telerik:RadDock>

                     </telerik:RadDockZone>

2-  ok.

3- I will create sample project and attach it for you as I fast as I can

thanks and best regards

[Pero]

Hello Moustafa,

Please note that, the height of the content placed within the TitlebarTemplate should not exceed 25px. I placed a UserControl within the dock and everything seems to be working fine. Please find the sample project that I tested, attached to the thread.
Moreover, if you have any block elements placed in the titlebar (like <div/>s for example), you need to apply some of the following styles (depending on the scenario):

• float: left
• float: right
• display:inline

If the problem persist please open a new support ticket, and send us a working project demonstrating the problems and we will do our best to help.

Sincerely yours,
Pero
the Telerik team

[Moustafa]

Hello Telerik Team.
thanks very much for your response and concerns
after making  a comparison between my project and the one you attached it I figured out the problem but I can not Solve it
I made some modifications in the user control and the problem  become clear

<div style="width:100%;min-width:100%">
<span style="color: Green; display: block; float: left;">Title</span>
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="Title Label"></asp:Label><span
    style="color: Green;">SOME TEXT</span>

</div>

just surrounding the code with DIV control causes the command buttons to disapear.
Note that  not the DIV that causes the problem but setting  the min-width property to 100% is the real cause.
the div contains background image that works as a header for each dock so I can not minimize its width to less that 100% to fill in the whole dock header.
I tried to set the z-index property for both the command css and the DIV but my trials failed
Is there any work around for this problem?

[Pero]

Hello Moustafa,

Test the following CSS:

<style type="text/css">
    .rdTitleBar EM
    {
        width: 100% !important;
    }
    .rdCommands
    {
        position: absolute !important;
        left: 7px !important;
    }
</style>

It should absolutely position the commands at the left side of the titlebar.

In case this does not help, please provide the background image for the titlem and a screenshot of how the dock should look like.

Greetings,
Pero
the Telerik team

[Moustafa]

Hi Pero
I did not have any thing to say for you except that

• many thanks for your help
• many thanks for your efforts
• many thanks for your concerns

the problem now solved.