RadPane resize after first page load

[Simon]

I am encountering an issue with changing the Height of a RadPane when using ajax. I have a splitter control with a left pane, top right pane and a bottom right pane(envision MS Outlook). The right hand panes are loaded with WebUserControls depending on the selections made in the left pane control. With ajax disabled everthing works as expected, i.e. controls are loaded and unloaded, state is maintained/saved and I am able to change the height and width of all panes and splitbars, etc... . When I enable ajax everthing still works with the exception of being able to resize the RadPanes. I have reviewed several training videos and samples over the last week, but none of them address this issue.

Your help is greatly appreciated.
Shawn

[Iana Tsolova]

Hi Simon,

Could you please provide the problematic page declaration (aspx)?
Additionally, you can check if the solution here helps.

Kind regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Simon]

Lana -

I had reviewed the link provided prior to submitting this thread and it did not provide a solution to the problem I am encountering. In respose to the source I have a scaled down version of the solution that demonstrates the problem. Is there a way for me to send this to you or upload it elsewhere as I cannot attach a zip file to this thread. Code snippits for pages....

Site Master page

<div id="pgContent">
    <form id="MainForm" runat="server">
    <telerik:RadScriptManager ID="LicAppRSM" runat="server" />
    <telerik:RadAjaxManager ID="LicAppAJM" runat="server" />
    <div id="headerContentPOPS">
        <div id="stSeal"></div>
        <div id="agencyLogo"></div>
    </div>
    <div id="menuContent">
        <asp:ContentPlaceHolder ID="menu_Content" runat="server" />
    </div>
    <div id="mainContent">
        <asp:ContentPlaceHolder ID="M_Content" runat="server" />
    </div>
    <div id="footerContent">
        <asp:ContentPlaceHolder ID="F_Content" runat="server">
            <hr />
            <table width="100%" border="0">
                <tr>
                    <td align="left">© 2009 </td>
                    <td align="right"><a href="#">Privacy Policy</a></td>
                </tr>
            </table>
        </asp:ContentPlaceHolder>
    </div>
    </form>
</div>

Nested Master page

<asp:Content ID="MenuContent" ContentPlaceHolderID="menu_Content" runat="server">
    <telerik:RadMenu ID="RadMenu1" Runat="server"
        Font-Names="Arial" Font-Size="Small"
        style="top: 0px; left: 0px; height: 28px; width: 934px">
        <DefaultGroupSettings Flow="Horizontal" ExpandDirection="Down" />
        <Items>
            <telerik:RadMenuItem runat="server" Text="Home" NavigateUrl="~/Default.aspx" />
            <telerik:RadMenuItem runat="server" Text="Online Licensing" NavigateUrl="~/Public/Licensing/LicHome.aspx" />
            <telerik:RadMenuItem runat="server" Text="Public Reporting" />
            <telerik:RadMenuItem runat="server" Text="Documents &amp; Forms" NavigateUrl="~/Public/DocHome.aspx" />
            <telerik:RadMenuItem runat="server" Text="Contact Us" />
        </Items>
    </telerik:RadMenu>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="M_Content" runat="server">
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="934">
        <telerik:RadPane ID="navigationPane" runat="server" Width="200" Scrolling="None">
            <asp:ContentPlaceHolder ID="Left_Menu_Content" runat="server" />
        </telerik:RadPane>
        <telerik:RadSplitBar ID="VSplitBar" runat="server" CollapseMode="Forward" />
        <telerik:RadPane ID="contentPane" runat="server" Scrolling="none">
            <asp:ContentPlaceHolder ID="Right_Content" runat="server" />
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

ASPX page responsible for loading menu and content panes

<asp:Content ID="LeftNavContent" ContentPlaceHolderID="Left_Menu_Content" Runat="Server">
    <telerik:RadAjaxManagerProxy ID="LicHomeRAMP" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="MenuPanelBar">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="LicSplitter" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadPanelBar ID="MenuPanelBar" runat="server" ExpandMode="MultipleExpandedItems" Width="200px" Height="500"
                         BackColor="GradientInactiveCaption" CollapseDelay="50" ExpandDelay="10"
                         CollapseAnimation-Duration="100" ExpandAnimation-Duration="100" OnItemClick="MenuPanelBar_ItemClick">
        <Items>
            <telerik:RadPanelItem Text="Message Center" ImageUrl="~/images/mail.gif" Expanded="true">
                <Items>
                    <telerik:RadPanelItem Text="All" Value="ALL" />
                    <telerik:RadPanelItem Text="Received" Value="RCVD" />
                    <telerik:RadPanelItem Text="Sent" Value="SENT" />
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Licensing Activities" ImageUrl="~/images/license.gif">
                <Items>
                    <telerik:RadPanelItem Text="Initial" Value="Initial" />
                    <telerik:RadPanelItem Text="Renewal" Value="Renewal" />
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
</asp:Content>
<asp:Content ID="LicContent" ContentPlaceHolderID="Right_Content" Runat="Server">
    <telerik:RadSplitter ID="LicSplitter" runat="server" Orientation="Horizontal" Width="100%">
        <telerik:RadPane ID="LicMainPane" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="LicSplitBar" runat="server" CollapseMode="Both" />
        <telerik:RadPane ID="LicDetailPane" runat="server">
            <telerik:RadAjaxPanel ID="LicNavPanel" runat="server">
                <telerik:RadMenu ID="LicNavMenu" runat="server" Width="100%" OnItemClick="LicNavMenu_ItemClick"  >
                <DefaultGroupSettings ExpandDirection="Auto" Flow="Horizontal" />
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Save" Value="Save"/>
                        <telerik:RadMenuItem runat="server" Text="Cancel" Value="Cancel"/>
                        <telerik:RadMenuItem runat="server" Text="Submit" Value="Submit" />
                    </Items>
                </telerik:RadMenu>
            </telerik:RadAjaxPanel>
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

Code behind for ASPX, method to adjust UI for loaded controls

        private void SetUI()
        {
            RadSplitBar vSplitBar = (RadSplitBar) Page.FindControlRecursive( "VSplitBar" );

            vSplitBar.EnableResize = false;

            if ( CurrentControl == null || CurrentControl.Equals( "MessageCenter" ) )
            {
                LicDetailPane.Height = Unit.Pixel( 200 ); <- Initial Size of Detail pane on first load
                LicDetailPane.Collapsed = false;
                LicSplitBar.Visible = true;
                LicSplitBar.CollapseMode = SplitBarCollapseMode.Both;
                LicSplitBar.EnableResize = true;
                LicNavMenu.Visible = false;
            }
            else
            {
                LicDetailPane.Height = Unit.Pixel( 28 );  <- This should be the size when a license control is loaded
                //LicDetailPane.Collapsed = true;
                LicSplitBar.Visible = true;
                LicSplitBar.CollapseMode = SplitBarCollapseMode.None;
                LicSplitBar.EnableResize = false;
                LicNavMenu.Visible = true;
            }
        }

The SetUI() method above is called for all changes to add and remove WebUserControls. Let me know if you need any additional information.
 
Thanks,
Shawn

[Simon]

Any Ideas on this issue?

[Iana Tsolova]

Hello Simon,

I used the provided code in the attached web site however I was not able to replicate the described issue. Can you check it out and let me know what I missed out?
Additionally, you can open a formal support ticket and attach the runnable sample there.

All the best,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Simon]

Lana -

I have corrected the problem that I was encountering and the intrerface is now working as expected with Ajax enabled. :-)

The sample you supplied had the SetUI() method commented out and it was not being called by any of the panel bar click events. I modified the default2.aspx.cs file with the code below and was able to duplicate the behavior that I was expierencing. You should be able to copy it as is into your solution and see this issue as well. What you will see when you run it, is the horizontal split bar does not change position after the first load.

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SetUI( "" );
    }

    private void SetUI( string inTmpStr )
    {
        if ( inTmpStr.Equals( "ALL" ) )
        {
            LicDetailPane.Height = Unit.Pixel( 200 ); //<- Size if panel item "ALL" selected
            LicSplitBar.Visible = true;
            LicSplitBar.CollapseMode = SplitBarCollapseMode.Both;
            LicSplitBar.EnableResize = true;
            LicNavMenu.Visible = false;
        }
        else if ( inTmpStr.Equals( "Initial" ) )
        {
            LicDetailPane.Height = Unit.Pixel( 28 );  //<- Size if panel item "Initial" selected
            LicSplitBar.Visible = true;
            LicSplitBar.CollapseMode = SplitBarCollapseMode.None;
            LicSplitBar.EnableResize = false;
            LicNavMenu.Visible = true;
        }
        else
        {
            LicDetailPane.Height = Unit.Pixel( 300 );  //<- Initial Size of Detail pane on first load all other selections
            LicSplitBar.Visible = true;
            LicSplitBar.CollapseMode = SplitBarCollapseMode.Both;
            LicSplitBar.EnableResize = true;
            LicNavMenu.Visible = false;
        }
    }
    protected void MenuPanelBar_ItemClick(object sender, RadPanelBarEventArgs e)
    {
        RadPanelBar tmpBar = (RadPanelBar) sender;
        SetUI( tmpBar.SelectedItem.Value );
    }
    protected void LicNavMenu_ItemClick(object sender, RadMenuEventArgs e)
    {
        SetUI( "" );
    }
}

I corrected the Issue by retrieving the Height of the LicSplitter control, subtracting the Height of the LicDetailPane and set the Height of the LicMainPane. When the page is first loaded if a pane does not have a height specified and it is somehow automatically calculated. So without ajax enabled full postbacks were occuring and the method that did the calculations fired every time. With ajax enabled this autocalculation appears to no longer be called, so I had to manually calculate it and set the size of all panes involved. Is there a way to cause the LicMainPane to also refresh without having to calculate the height mySelf and set it? The changed Code is below.

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SetUI( "" );
    }

    private void SetUI( string inTmpStr )
    {
        int ContentHeight = (int) LicSplitter.Height.Value;
        int LicNavMenuHeight = (int) LicNavMenu.Height.Value;

        if ( inTmpStr.Equals( "ALL" ) )
        {
            LicMainPane.Height = Unit.Pixel( ContentHeight / 2 );   //Split display area in half
            LicDetailPane.Height = Unit.Pixel( ContentHeight / 2 );
            LicSplitBar.Visible = true;
            LicSplitBar.CollapseMode = SplitBarCollapseMode.Both;
            LicSplitBar.EnableResize = true;
            LicNavMenu.Visible = false;
        }
        else if ( inTmpStr.Equals( "Initial" ) )
        {
            LicMainPane.Height = Unit.Pixel( ContentHeight - LicNavMenuHeight - 4 ); //Enlarge Main and Shrink detail NavMenu
            LicDetailPane.Height = Unit.Pixel( LicNavMenuHeight );
            LicSplitBar.Visible = true;
            LicSplitBar.CollapseMode = SplitBarCollapseMode.None;
            LicSplitBar.EnableResize = false;
            LicNavMenu.Visible = true;
        }
        else
        {
            LicMainPane.Height = Unit.Pixel( ContentHeight - 300 );   //All other selections
            LicDetailPane.Height = Unit.Pixel( 300 );
            LicSplitBar.Visible = true;
            LicSplitBar.CollapseMode = SplitBarCollapseMode.Both;
            LicSplitBar.EnableResize = true;
            LicNavMenu.Visible = false;
        }
    }
    protected void MenuPanelBar_ItemClick(object sender, RadPanelBarEventArgs e)
    {
        RadPanelBar tmpBar = (RadPanelBar) sender;
        SetUI( tmpBar.SelectedItem.Value );
    }
    protected void LicNavMenu_ItemClick(object sender, RadMenuEventArgs e)
    {
        SetUI( "" );
    }
}

Thanks,
Shawn