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

Stack zones vertically?

4 Answers 52 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Mark Mrozek
Top achievements
Rank 2
Mark Mrozek asked on 07 Oct 2008, 10:44 PM
Greetings!

Is there a way to set orientation of the zones themselves within the layout? I'm trying to create a dashboard that allows users to select various layouts for the docking zones. One of these would be to have two zones, one on top of the other, that both have Orientation="Horizontal". This would be useful for two horizontal rows of small docks (such as two rows of gauges or pie charts).

Is this possible, and if so how? I hope this is something ridiculously easy that I've overlooked.

Thanks in advance!

4 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 10 Oct 2008, 02:20 PM
The RadDockZone orientation property is related to the RadDocks arangement when the RadDock is in the zone.
An example related to the orientation property is available here:
http://demos.telerik.com/ASPNET/Prometheus/Dock/Examples/ZoneOrientation/DefaultCS.aspx

If this doesn't help you, please describe your goal in more details and I will try to help you.
0
Mark Mrozek
Top achievements
Rank 2
answered on 10 Oct 2008, 07:32 PM
Thanks for the response. The orientation property is not what I'm having the issue with and I have looked through the example to which you refer. The issue is that I can't seem to place one zone under the other unless the screen size happens to force a wrap. They always want to sit next to each other instead.

(D = docks and dashed lines = zones)
Goal -
----------------------
|  D1    D2    D3   |
----------------------
----------------------
|  D4    D5    D6   |
----------------------

Current result -
----------------------  ----------------------
|  D1    D2    D3   |  |  D4    D5    D6   |
----------------------  ----------------------

Any suggestions are much appreciated!

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 13 Oct 2008, 09:20 AM
The RadDockZone control is rendered as a Div on a client. So you can reorder them as you reorder divs on a client. The simpliest way to achieve your goal is to add zones in a table. Another way to achieve such a goal is to add them in a div and set their width to 100%, e.g.
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server" style="height:100%">  
    <title>Untitled Page</title> 
</head> 
<body  style="height:100%">  
    <form id="form1" runat="server" > 
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
          
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
        <div style="width:600px">  
            <telerik:RadDockZone ID="RadDockZone1" runat="server" style="width:100%">  
                   <telerik:RadDock ID="RadDock1" Text="RadDock1" runat="server">  
                    <Commands> 
                      
                    </Commands> 
                    <ContentTemplate> 
                        Simple text  
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
              <telerik:RadDockZone ID="RadDockZone2" runat="server" style="width:100%">  
                <telerik:RadDock ID="RadDock2" Text="RadDock1" runat="server">  
                    <Commands> 
                      
                    </Commands> 
                    <ContentTemplate> 
                        Simple text  
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
        </div> 
        <table style="width:400px">  
            <tr> 
                <td> 
                  <telerik:RadDockZone ID="RadDockZone3" runat="server" style="width:100%">  
                   <telerik:RadDock ID="RadDock3" Text="RadDock1" runat="server">  
                    <Commands> 
                      
                    </Commands> 
                    <ContentTemplate> 
                        Simple text  
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                 <telerik:RadDockZone ID="RadDockZone4" runat="server" style="width:100%">  
                <telerik:RadDock ID="RadDock4" Text="RadDock1" runat="server">  
                    <Commands> 
                      
                    </Commands> 
                    <ContentTemplate> 
                        Simple text  
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
                  
                </td> 
            </tr> 
        </table> 
        </telerik:RadDockLayout> 
    </form> 
</body> 
</html> 
 
.Hope this helps!
0
Mark Mrozek
Top achievements
Rank 2
answered on 14 Oct 2008, 02:08 PM
I was so focused on looking for properties in the Telerik space and CSS that I neglected the trusty old school HTML tricks :) I can get my desired result on a static page now, but the dynamic version is still problematic. I'll play around with it further and see what happens.

Thanks again!
Tags
Dock
Asked by
Mark Mrozek
Top achievements
Rank 2
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Mark Mrozek
Top achievements
Rank 2
Share this question
or