ResizeWithParentPane not working with splitters created by ajax

2 posts, 1 answers
  1. László
    László avatar
    12 posts
    Member since:
    Jul 2008

    Posted 15 Nov 2012 Link to this post

    Hi,

    I have a radsplitter on my page. In the top side of the splitter there is a multipage control (and a tabstrip which is not provided in the code below). I would like to load another splitter to this multipage control using ajax. Here is my code:

    aspx:

    <form id="form1" runat="server">
     
           <telerik:RadScriptManager ID="ScriptManager" runat="server" />
           <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
               <AjaxSettings>
                   <telerik:AjaxSetting AjaxControlID="Button1">
                       <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                       </UpdatedControls>
                   </telerik:AjaxSetting>
               </AjaxSettings>
           </telerik:RadAjaxManager>
     
           <asp:Button runat="server" ID="Button1" Text="Button" />
     
           <telerik:RadSplitter runat="server" ID="splitter" Orientation="Horizontal" Width="100%" Height="100%" Skin="WebBlue" VisibleDuringInit="false" LiveResize="true">
               <telerik:RadPane runat="server" ID="RadPane1">
                   <telerik:RadMultiPage runat="server" ID="RadMultiPage1" OnPageViewCreated="RadMultiPage1_PageViewCreated"/>
               </telerik:RadPane>
               <telerik:RadSplitBar runat="server" ID="RadSplitBar1" />
               <telerik:RadPane runat="server" ID="RadPane2">
                   RadPane2
               </telerik:RadPane>
           </telerik:RadSplitter>
       </form>

    cs:

    protected override void RaisePostBackEvent( IPostBackEventHandler sourceControl, string eventArgument )
    {
        RadMultiPage1.PageViews.Add( new RadPageView() );
        base.RaisePostBackEvent( sourceControl, eventArgument );
    }
     
    protected void RadMultiPage1_PageViewCreated( Object sender, RadMultiPageEventArgs e )
    {
        RadSplitter splitter = new RadSplitter();
        splitter.ResizeWithParentPane = true;
        splitter.Items.Add( new RadPane() );
        splitter.Items.Add( new RadSplitBar() );
        splitter.Items.Add( new RadPane() );
     
        e.PageView.Controls.Add( splitter );
        e.PageView.Selected = true;
    }

    Everything works fine except the ResizeWithParentPane property. If I resize the outer splitter, the inner (dynamically created) splitter won't get the desired size. Am I missing something?

  2.
  3. Answer
    Vessy
    Admin
    Vessy avatar
    1891 posts

    Posted 20 Nov 2012 Link to this post

    Hi László,

    The Ajax in the provided code updates only the content of the RadPane (which indeed is the recommended approach) but this is why RadPane1 does not know about the newly created Splitter and that it has to resize it.

    In order to avoid the ajaxificaion of the whole parent Splitter, my suggestion is to set the new Splitter's ResizeWithParentPane to "false" and to set its Width and Height to 100%:
    protected void RadMultiPage1_PageViewCreated(Object sender, RadMultiPageEventArgs e)
    {
        RadSplitter splitter = new RadSplitter();
        splitter.Width = Unit.Percentage(100);
        splitter.Height = Unit.Percentage(100);
        splitter.ResizeWithParentPane = false;
        splitter.Items.Add(new RadPane());
        splitter.Items.Add(new RadSplitBar());
        splitter.Items.Add(new RadPane());
     
        e.PageView.Controls.Add(splitter);
        e.PageView.Selected = true;
    }

    Also you have to set the Scrolling property of RadPane1 to "None":
    <telerik:RadSplitter runat="server" ID="splitter" Orientation="Horizontal" Width="100%"
        Height="100%" Skin="WebBlue" VisibleDuringInit="false" LiveResize="true">
        <telerik:RadPane runat="server" ID="RadPane1" Scrolling="None">

    Regards,
    Vesi
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top