This is a migrated thread and some comments may be shown as answers.

Horizontal Orientation of DockZone lost in 2009.3 upgrade

6 Answers 67 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Barry P
Top achievements
Rank 1
Barry P asked on 30 Dec 2009, 08:25 PM
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.

6 Answers, 1 is accepted

Sort by
0
Shane Grant
Top achievements
Rank 1
answered on 01 Jan 2010, 09:16 PM
I am seeing very similar results, did you ever find an answer?
0
LeBear
Top achievements
Rank 1
answered on 03 Jan 2010, 03:38 PM
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!
0
Pero
Telerik team
answered on 04 Jan 2010, 09:59 AM
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.
0
LeBear
Top achievements
Rank 1
answered on 04 Jan 2010, 03:25 PM
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
0
Shane Grant
Top achievements
Rank 1
answered on 08 Jan 2010, 06:29 AM
Thanks Barry,

I was able to work out a solution by using your guide to work it into our situation.
0
LeBear
Top achievements
Rank 1
answered on 08 Jan 2010, 06:37 AM
Excellent.  Glad I could help!
Tags
Dock
Asked by
Barry P
Top achievements
Rank 1
Answers by
Shane Grant
Top achievements
Rank 1
LeBear
Top achievements
Rank 1
Pero
Telerik team
Share this question
or