Horizontal Splitter

3 posts, 0 answers
  1. Cush
    Cush avatar
    88 posts
    Member since:
    Apr 2010

    Posted 05 Dec 2010 Link to this post

    Hi All

    I have got a Vertical Splitterand and a Horizontal splitter on the same page,
    Everything seems to be fine untill i collapse the Horizontal one? The Horizontal one wont keep its proportions after that?
    I have posted my code if anyone has any ideas i would appricate hearing them.

    Many Thanks

    Regards

    Darren
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
    <head runat="server">
        <title></title>
        <style type="text/css">
            hmtl, body, form , a img
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
                border: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div id="ParentDivElement" style="height: 100%;">
         <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" LiveResize="True"
                Orientation="Horizontal" Skin="Web20" Width="100%" VisibleDuringInit="false"
                FullScreenMode="True" BorderColor="0">
                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="450px" MaxHeight="450" MinHeight="450">
                      
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Index="2" Height="250px" MaxHeight="250" MinHeight="250" >
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" 
                        Skin="Web20" VisibleDuringInit="false" BorderColor="0" Width="100%" Height="100%">                
                 <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Bottom" DockedPaneId="RadSlidingPane2">
                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Child Movements" ViewStateMode="Inherit"  DockOnOpen="true" IconUrl="Images/Icons/cmove16.png" Scrolling="None" Height="500" Width="250" MinWidth="500">
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Movement Notes" ViewStateMode="Inherit" DockOnOpen="true" IconUrl="Images/Icons/note16.png" Scrolling="None" Height="500" Width="250" MinWidth="500">                        
                            </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                            </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both">
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="RadPane4" runat="server">
                            <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" SlideDirection="Bottom">
                                <telerik:RadSlidingPane ID="RadSlidingPane3" runat="server" Title="Future Stuff" Height="230" Width="500"  >
                                </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                        </telerik:RadPane>
                            </telerik:RadSplitter>
                             </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Dec 2010 Link to this post

    Hi Darren,

    The problem occurs because the used RadSplitter configuration is not supported - you cannot have sliding zone with SlidingDirection="Bottom" or SlidingDirection="Top" in a vertical splitter. Respectively , you cannot have sliding zone with SlideDirection Left / Right in a horizontal splitter.

    This restriction is because, by design, RadSlidingZone occupy 100% width (or height) of its parent RadPane when the splitter is horizontal (or vertical).

    In order to achieve the required functionality I suggest you to use another horizontal splitter, e.g.:
    ..........
    <telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Index="2" Height="250px"
        MaxHeight="250" MinHeight="250">
        <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" Skin="Web20"
            VisibleDuringInit="false" BorderColor="0" Width="100%" Height="100%">
            <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
                <telerik:RadSplitter ID="RadSplitter3" runat="server" Skin="Web20" Orientation="Horizontal">
                    <telerik:RadPane ID="RadPane3_1" runat="server">
                        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Bottom"
                            DockedPaneId="RadSlidingPane2">
    .........


    Regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jumpstart 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
  4. Cush
    Cush avatar
    88 posts
    Member since:
    Apr 2010

    Posted 09 Dec 2010 Link to this post

    Thanks a lot Dobromir

    That makes sense now
Back to Top