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

Horizontal Splitter

2 Answers 29 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Cush
Top achievements
Rank 1
Cush asked on 05 Dec 2010, 06:46 PM
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 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 08 Dec 2010, 02:51 PM
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.
0
Cush
Top achievements
Rank 1
answered on 09 Dec 2010, 12:10 PM
Thanks a lot Dobromir

That makes sense now
Tags
Splitter
Asked by
Cush
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Cush
Top achievements
Rank 1
Share this question
or