Nested Splitter width in Sliding Pane

3 posts, 1 answers
  1. Steele
    Steele avatar
    96 posts
    Member since:
    Mar 2008

    Posted 29 Nov 2010 Link to this post

    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. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Dec 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steele
    Steele avatar
    96 posts
    Member since:
    Mar 2008

    Posted 02 Dec 2010 Link to this post

    Yep - that did it.
    ResizeWithParentPane does sound like it should resize the splitter with the parent pane... but as long as there is a solution!
    Thanks!
    Steele.
Back to Top