Using Splitters to resize DockZones

2 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 14 Jan 2011 Link to this post

    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
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 19 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top