[Solved] User control does not resize when RadPane expands

[Helen]

Hi,

I have a RadSlidingPane that has a top and a bottom RadPane.  The top one has 2 buttons and the bottom one has a user control which contains only a treeview.

        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" width="100%" Height="100%">

            <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Height="500px" Scrolling="None" >
                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Height="100%" Width="22px">
                    <telerik:RadSlidingPane ID="LeadSearchSlidePane" Title="Search Criteria" runat="server" width="150px">
                        <uc1:LeadSearchCriteria runat="server" ID="LeadSearchCriteria" />
                    </telerik:RadSlidingPane>

                    <telerik:RadSlidingPane ID="TreeListSlidePane" Title="Tree View" runat="server" Scrolling="None"  OnClientExpanded="ResizeTreeViewControl">
                        <telerik:RadSplitter runat="server" ID="RadTreeSplitterTop" Orientation="Horizontal" >
                        <telerik:RadPane runat="server" ID="RadTreePaneTop" Height="25px">
                            <telerik:RadButton ID="RadButton1" runat="server" Text="Apply"></telerik:RadButton>
                            <telerik:RadButton ID="RadButton2" runat="server" Text="Cancel"></telerik:RadButton>
                        </telerik:RadPane>
                        <telerik:RadPane runat="server" ID="RadTreePaneBottom" Width="350px" >
                            <uc2:LeadSearchTreeView runat="server" ID="LeadSearchTreeView" />
                        </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadSlidingPane>

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

... OMITTING THE REST OF THE SPLITTER AND RADPANE SETTING...

As you can see from the attached screen shot, the RadPane doesn't resize when the RadPane expanded.  It will resize when the RadPane is docked.  I looked at the page source and I could see my user control being wrapped with <div> tags that set the width to 22px.  I tried to resize it during OnClientExpanding/OnClientExpanded, but I couldn't make it work.  Could you show me the correct way of resizing the RadPane?

Javascript :

function ResizeTreeViewControl(sender, eventArgs) {
    var splitter = $find("<%= RadTreeSplitterTop.ClientID %>");
    var pane = splitter.getPaneById("<%= RadTreePaneBottom.ClientID %>");
    pane.resize(200);
 }

Thank you,

Helen

[Helen]

I didn't attach the screen shot in my previous post.

[Vessy]

Hi Helen,

Thank you for the provided code.

The reason behind this behavior is the size of the LEftPane. The inner Splitters by design inherit the width and height of their parent panes and so, until the sliding pane is pinned, the LeftPane width is 22px. In order to avoid this behavior you will need to set the Splitter's ResizeWithParentPane property to False, along with its Width and Height to 100%:

<telerik:RadSlidingPane ID="TreeListSlidePane" Title="Tree View" runat="server" Scrolling="None" _OnClientExpanded="ResizeTreeViewControl">
    <telerik:RadSplitter runat="server" ID="RadTreeSplitterTop" Orientation="Horizontal" ResizeWithParentPane="false" Width="100%" Height="100%">
        ...
    </telerik:RadSplitter>
</telerik:RadSlidingPane>

Please, give this suggestion a try and let me know how it goes.

Kind regards,
Vessy
Telerik