Visual Studio like sliding and docking

2 posts, 0 answers
  1. Omar
    Omar avatar
    9 posts
    Member since:
    Oct 2016

    Posted 03 Nov Link to this post

    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.

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 08 Nov Link to this post

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