Horizontal Orientation of DockZone lost in 2009.3 upgrade

7 posts, 0 answers
  1. Barry P
    Barry P avatar
    13 posts
    Member since:
    Aug 2006

    Posted 30 Dec 2009 Link to this post

    Hello Telerik:

    I've just tested upgrading to 2009.3 from 2009.2, and it appears that the Horizontal Layout of Docks within a DockZone was lost.

    I have a portal page that places DockZones within table cells.  While the table layout is configurable, I tested this with a simple three-cell layout.  The first cell of the table runs across the full length of the table with a colspan of 2.  The second and third cells are in the second row.  There is a DockZone in each cell.  The first cell has a DockZone with a horizontal orientation, where the other two cells have DockZones with vertical orientations. 

    Each dock is implemented by instantiating a User Control that is added to the ContentContainer of the Dock object.  In the top zone, the user controls contain a DIV that has a CSS class that sets their height and width to 75px. 

    In 2009.2, this rendered the docks in the top zone from left to right, each having a width of 75px.  In 2009.3, the docks go 100% across and stack, still with a height of 75px.

    As an experiment, after creating the dock in 2009.3, I set the width of the dock itself to 75px via Dock.Style.Add.  This had no effect.

    I can easily swap the 2009.2 and 2009.3 DLL's, and the behavior changes as I've indicated.

    Can you assist?

    Thank you.
  2. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 01 Jan 2010 Link to this post

    I am seeing very similar results, did you ever find an answer?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 03 Jan 2010 Link to this post

    Not yet.  I'm hoping Telerik will hop on this Monday so that I can make plans to run the new version.  This is a show-stopper for me!
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 04 Jan 2010 Link to this post

    Hello LeBear,

    I have created a sample project based on the description that you have provided, but did not experience different behavior when testing with Q2 2009 and Q3 2009. Here is a link to a video captured while running the project. I believe the problem is caused by some custom CSS that you are applying to the Dock control. With Q3 2009 we have introduced an improved rendering of the RadDock control that solves number issues reported by our customers. Unfortunately custom CSS code that previously worked might not work with the latest version.

    So can you please modify (or send a) the sample project (the source code is pasted below) so that we can observe the problem locally?

    To set the width (or height) to the RadDock control use the Width property.

    Here is the full source code of the project:

    <%@ 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">
            .tdStyle
            {
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <table width="100%" style="height: 400px; table-layout: fixed;">
                <tbody>
                    <tr>
                        <td colspan="2" class="tdStyle">
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="99%"
                                Orientation="Horizontal">
                                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title">
                                    <ContentTemplate>
                                        <div style="width: 75px; height: 75px;">
                                            CONTENT
                                        </div>
                                    </ContentTemplate>
                                </telerik:RadDock>
                            </telerik:RadDockZone>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdStyle">
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="99%">
                                <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title">
                                    <ContentTemplate>
                                        <div style="width: 75px; height: 75px;">
                                            CONTENT
                                        </div>
                                    </ContentTemplate>
                                </telerik:RadDock>
                            </telerik:RadDockZone>
                        </td>
                        <td class="tdStyle">
                            <telerik:RadDockZone ID="RadDockZone3" runat="server" MinHeight="300px" Width="99%">
                                <telerik:RadDock ID="RadDock3" runat="server" Title="RadDock-Title">
                                    <ContentTemplate>
                                        <div style="width: 75px; height: 75px;">
                                            CONTENT
                                        </div>
                                    </ContentTemplate>
                                </telerik:RadDock>
                            </telerik:RadDockZone>
                        </td>
                    </tr>
                </tbody>
            </table>
        </telerik:RadDockLayout>
        </form>
    </body>
    </html>


    Sincerely yours,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 04 Jan 2010 Link to this post

    Hello Pero,

    Thank you for your efforts.  Actually, the problem had nothing to do with custom CSS.

    The main difference between your example and my solution is the dynamic nature of the docks.  Instead of declaring them statically, they are dynamically created, placed in their zones, and their saved DockStates are applied.

    In my code, relying on the previous behavior of the docks, I was not addressing the width of the docks at all.  They seemed to render only as wide as they needed to in order to accommodate the width of their content, so I was controlling the width of the content instead.  In the new version, the width of the docks are handled differently.  By explicitly handling the width instead of relying on some default behavior, I'm able to get back to where I was.

    For the vertically align dock zones, I'm not doing anything different.  However, in the horizontally aligned zone, I have to do two things I wasn't doing before in order to address this.  First, when a user makes a request to add a new dock to the horizontally aligned zone, I apply a default width.  I do this through a default DockState that I create and apply to the dock.  Second, when I save the dock states for the user, I make sure I'm capturing the width, too.  I noticed that the docks in the vertically aligned zones don't return a width, so I skip saving them - I only save the widths for those docks that return one. 

    Shane, I hope this helps you out, too.

    --Barry
  7. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 08 Jan 2010 Link to this post

    Thanks Barry,

    I was able to work out a solution by using your guide to work it into our situation.
  8. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 08 Jan 2010 Link to this post

    Excellent.  Glad I could help!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017