User control does not resize when RadPane expands

4 posts, 0 answers
  1. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 22 Apr 2014 Link to this post


    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 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 runat="server" ID="RadTreePaneBottom" Width="350px" >
                                <uc2:LeadSearchTreeView runat="server" ID="LeadSearchTreeView" />

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

    Thank you,


  2. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 23 Apr 2014 in reply to Helen Link to this post

    I didn't attach the screen shot in my previous post.
  3. DevCraft R3 2016 release webinar banner
  4. Vessy
    Vessy avatar
    1354 posts

    Posted 25 Apr 2014 Link to this post

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

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

    Kind regards,

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  5. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 25 Apr 2014 in reply to Vessy Link to this post


    Wow, the solution is so simple...I ended up writing javascript to calculate and set_width on the pane during OnClientExpanded...
    My lack of experience in and Telerik controls had me took the long route.  I'm sure with time I'll be better and asking less dumb questions.

    Thank you so much for your help!

Back to Top