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

Nested Splitter width in Sliding Pane

2 Answers 53 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Steele
Top achievements
Rank 1
Steele asked on 30 Nov 2010, 03:59 AM
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

Sort by
0
Accepted
Dobromir
Telerik team
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.
0
Steele
Top achievements
Rank 1
answered on 03 Dec 2010, 12:21 AM
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.
Tags
Splitter
Asked by
Steele
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Steele
Top achievements
Rank 1
Share this question
or