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

Visual Studio like sliding and docking

1 Answer 16 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Omar
Top achievements
Rank 1
Omar asked on 03 Nov 2016, 12:00 PM

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.

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 08 Nov 2016, 09:04 AM

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
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Tags
Splitter
Asked by
Omar
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or