Rad Dock Problems while updating to new version

9 posts, 1 answers
  1. Moustafa
    Moustafa avatar
    70 posts
    Member since:
    Jul 2008

    Posted 16 Jun 2010 Link to this post

    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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 Jun 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Moustafa
    Moustafa avatar
    70 posts
    Member since:
    Jul 2008

    Posted 21 Jun 2010 Link to this post

    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

     

     

  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Jun 2010 Link to this post

    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">
    <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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Moustafa
    Moustafa avatar
    70 posts
    Member since:
    Jul 2008

    Posted 26 Jun 2010 Link to this post

    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
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 30 Jun 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Moustafa
    Moustafa avatar
    70 posts
    Member since:
    Jul 2008

    Posted 30 Jun 2010 Link to this post

    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?




  9. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 02 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Moustafa
    Moustafa avatar
    70 posts
    Member since:
    Jul 2008

    Posted 03 Jul 2010 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017