ResizeWithParentPane not working with splitters created by ajax

[László]

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?

[Vessy]

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