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

Using Splitters to resize DockZones

1 Answer 83 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 15 Jan 2011, 12:51 AM
Hi all,

I am trying to get my head around this problem and was hoping to be given some guidance on where to start. The easiest way to envision my desired end result is this: An entire specified area is a dock zone. Splitters can be placed onto that dock zone to subdivide it. The user is able to drag-and-drop a dock onto the dock zone and have the dock autofill the area until it hits a splitter. So, for instance, if there was one splitter dividing the upper and lower halves of the dock zone, and then two vertical splitters dividing the upper and lower halves. In this way we would have 4 quadrants and a dock would be able to dock in any of these quadrants.

Now, I believe this is not possible with one dock zone (correct me if I'm wrong!). So, I believe I need to be dynamically adding a dock zone with every splitter. When the first splitter is added (to divide upper/lower), the original dock zone would shrink to half its original height, the splitter would be added to the middle, and the new dock zone would fill the lower half. 

Is this about right? Do I just drop a Rad Splitter onto a page, then add a Rad Pane with a Rad Dock Zone on it to the splitter, and resize accordingly?

Sean

1 Answer, 1 is accepted

Sort by
0
Accepted
Dobromir
Telerik team
answered on 19 Jan 2011, 03:15 PM
Hi Sean,

It is not possible to split RadDockZone using RadSplitter because, you cannot have controls different than RadDock inside the RadDockZone.

To achieve the required result, you can use RadSplitter to divide the page into quadrants and have a RadDockZone inside each pane, e.g.:
<telerik:RadSplitter ID="RadSplitter1" runat="server">
    <telerik:RadPane ID="RadPane1" runat="server">
        <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
            <telerik:RadPane ID="RadPane3" runat="server">
                <telerik:RadDockZone ID="RadDockZone11" runat="server" Width="100%" Height="100%"
                    BorderWidth="0" Style="padding: 0;">
                </telerik:RadDockZone>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane4" runat="server">
                <telerik:RadDockZone ID="RadDockZone12" runat="server" Width="100%" Height="100%"
                    BorderWidth="0" Style="padding: 0;">
                </telerik:RadDockZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server">
        <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal">
            <telerik:RadPane ID="RadPane5" runat="server">
                <telerik:RadDockZone ID="RadDockZone21" runat="server" Width="100%" Height="100%"
                    BorderWidth="0" Style="padding: 0;">
                </telerik:RadDockZone>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane6" runat="server">
                <telerik:RadDockZone ID="RadDockZone22" runat="server" Width="100%" Height="100%"
                    BorderWidth="0" Style="padding: 0;">
                </telerik:RadDockZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>
 
<telerik:RadDock ID="RadDock1" runat="server">
    <ContentTemplate>
        <br />
        <br />
        <br />
        <br />
        Content<br />
        <br />
        <br />
        <br />
    </ContentTemplate>
</telerik:RadDock>

I hope this helps.

Greetings,
Dobromir
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Splitter
Asked by
Sean
Top achievements
Rank 2
Answers by
Dobromir
Telerik team
Share this question
or