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

Horizontal Splitter

2 Answers 106 Views

Splitter

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

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" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.