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

Nested Splitter width in Sliding Pane

2 Answers 81 Views

Splitter

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

Steele asked on 30 Nov 2010, 03:59 AM

nestedsplitteronslidingpanepinned.png

nestedsplitteronslidingpane.png

I am having trouble having my splitter within a sliding pane become full width (100%) on the sliding pane expansion.
Basically, the nested splitter is remaining at the width of the Pane (RadPane6 in my example) that the Sliding Zone is nested in. Check out the pictures to see what I mean. If I Pin the sliding panel, the nested splitter's width refreshes and appears as expected.
The code below shows the setup in action.

<telerik:RadSplitter ID="RadSplitter3" runat="server" BackColor="Red" Height="100%"

SplitBarsSize="5px" VisibleDuringInit="False" Width="100%">

<telerik:RadPane ID="RadPane5" runat="server" BackColor="#0099CC" Index="0">

<telerik:RadPanelBar ID="RadPanelBar2" runat="server" ExpandMode="FullExpandedItem"

Width="100%" Height="100%">

<Items>

<telerik:RadPanelItem runat="server" Text="Element" Selected="True" Expanded="True"

BackColor="Yellow" Height="100%">

<Items>

<telerik:RadPanelItem runat="server" Value="Element">

<ItemTemplate>

<div id="ElementHolder" runat="server" style="width: 100%; height: 460px; overflow: hidden">

<table>

<tr>

<td>

</td>

<td style="width: 50px" valign="top">

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

<HeaderTemplate>

<div style="margin-left: 5px">

<asp:Label ID="Label1" name="ElementDescriptor" runat="server" Text="Element"></asp:Label></div>

</HeaderTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Category" BackColor="#8080FF">

<Items>

<telerik:RadPanelItem runat="server" Value="Category">

<ItemTemplate>

<div id="CategoryHolder" runat="server" style="width: 100%; height: 100%; overflow: hidden">

<table>

<tr>

<td>

</td>

<td style="width: 50px" valign="top">

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

<HeaderTemplate>

<div style="margin-left: 5px">

<asp:Label ID="Label2" runat="server" Text="Category"></asp:Label></div>

</HeaderTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Criteria" BackColor="#00C000">

<Items>

<telerik:RadPanelItem runat="server" Value="Criteria">

<ItemTemplate>

<div id="CriteriaHolder" runat="server" style="width: 100%; height: 100%; overflow: hidden">

<table>

<tr>

<td>

</td>

<td style="width: 50px" valign="top">

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

<HeaderTemplate>

<div style="margin-left: 5px">

<asp:Label ID="Label3" runat="server" Text="Criteria"></asp:Label></div>

</HeaderTemplate>

</telerik:RadPanelItem>

</Items>

<ExpandAnimation Duration="1000" />

<CollapseAnimation Duration="1000" />

</telerik:RadPanelBar>

</telerik:RadPane>

<telerik:RadPane ID="RadPane6" runat="server" BackColor="#FFFF66" Width="23px">

<telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" ClickToOpen="True" SlideDirection="Left">

<telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" EnableResize="False"

Scrolling="None" Width="200px" BackColor="#0066FF">

<div style="background-color: #00FF00; width: 100%; height: 100%; overflow: visible;">

<telerik:RadSplitter ID="RadSplitter4" runat="server" Height="100%" Orientation="Horizontal"

ResizeMode="AdjacentPane" SplitBarsSize="5px" Width="100%" BackColor="#FF99FF">

<telerik:RadPane ID="RadPane7" runat="server" Width="100%" BackColor="#FF9999">

<asp:Panel ID="Panel1" runat="server" Width="100%">

</asp:Panel>

</telerik:RadPane>

<telerik:RadPane ID="RadPane8" runat="server" Width="100%" Height="30px" BackColor="#FFFF66">

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone></telerik:RadPane>

</telerik:RadSplitter>

Please let me know how to rectify this issue.
Thanks,
Steele.

2 Answers, 1 is accepted

Accepted

answered on 02 Dec 2010, 12:55 PM

Hi Steele,

This is expected behavior of nested RadSplitter. By design, when RadSplitter is nested inside another splitter it inherits the size of its parent pane. In order to avoid this behavior you need to set ResizeWithParentPane property of the nested splitter to false, e.g.:

<telerik:RadPane ID="RadPane6" runat="server" BackColor="#FFFF66" Width="23px">

<telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" ClickToOpen="True" SlideDirection="Left">

<telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" EnableResize="False"

Scrolling="None" Width="200px" BackColor="#0066FF">

<div style="background-color: #00FF00; width: 100%; height: 100%; overflow: visible;">

<telerik:RadSplitter ID="RadSplitter4" runat="server" Height="100%" Orientation="Horizontal"

ResizeMode="AdjacentPane" SplitBarsSize="5px" Width="100%" BackColor="#FF99FF" ResizeWithParentPane="false" >

Best 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.