Visual Studio like sliding and docking

[Omar]

I'm trying to implement two panels that slide and dock similar to visual studio's Solution Explorer and Properites. I was able to make them slide using splitter/slidingzone/slidingpane with a litlle tab appearing when they are hidden. I want to also be able to dock them side by side by dragging one of them next to the other one. For my search I found that it may be done using Dock but I did not find how to do it. I tried to implement it by it did not work with me and I had to revert back to the splitter code to implement other functionalities. what it did was putting the slidingzone inside the dock/dockzone/dockpane

<telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" Skin="Material" runat="server" Width="100%" Height="100%">
    <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none" Locked="False">
        <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px" RenderMode="Lightweight">
            <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Emergency" runat="server" Width="300px" MinWidth="300">
                <uc1:EmergencyControl runat="server" ID="EmergencyControl" />
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="Radslidingpane2" Title="Alarm" runat="server" Width="300px" MinWidth="300">
                <uc1:AlarmControl runat="server" ID="AlarmControl" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">
        <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false" Height="100%">
            <telerik:RadPane ID="MapPane" runat="server">
                <uc1:MapControl runat="server" ID="MapControl" Height="100%" />
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
    <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">
        <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" ClickToOpen="true"
            SlideDirection="Left">
            <telerik:RadSlidingPane ID="AlarmBtnPane" Title="Alarm Button" runat="server" Width="50px"
                MinWidth="50" EnableDock="False" EnableResize="False" TabView="TextAndImage">
                <uc1:AlarmBtnControl runat="server" ID="AlarmBtnControl" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>

 

So I you can provide a example on how to implement it.

[Ianko]

Hello Omar,

 

The Splitter does not provide functionality to drag panes in the splitter. You can only add sliding panes, dock them and so on. Similar to this demo here: http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_dockonopen/defaultcs.aspx. Which I see from the code that actually has been implemented. 

 

As for RadDock, no, it cannot help you somehow to have the dragging in Splitter. Neither is possible to implement the RadDock to act as a pane. 

 

Without a built-in support for pane dragging it is not possible to accomplish the functionality you are after.

 

Regards,
Ianko
Telerik by Progress