setting an initial width of radsplitter/radpane with width=100%

[Felipe]

Hello,

I am using a radsplitter/radpane in my application (inside a Master page if that changes things) with width/height set to 100% (filling the browser).

When loading the page in chrome, everything loads pretty quickly and visually the page looks fine.

when loading the page in IE, however, there is a brief lag period in the initial loading of the page where the radsplitter is initially quite small (on the order of 500px or so) while the content is loading.

i am assuming that IE renders its content differently somehow in such a way that it cannot calculate the full height of the browser until after the full page load... (that, or the javascript function to recalculate the height of the control is just fired much later in IE?)

what i am asking is:  is there a way to set an "initial width" to the radsplitter so that when it loads it looks more reasonable (say 1000px or something) and then adjusts itself to 100% when it is ready?

Thanks.

[Dobromir]

Hi Leland,

It is not possible to set a predefined width / height to the splitter when configured to use percentage values. Could you please try setting RadSplitter's VisibleDuringInit property to false and see if the reported behavior will occur under Internet Explorer?

Best wishes,
Dobromir
the Telerik team

[Felipe]

This is what i initially did but it would take IE a fair amount of time to "init" and made the site seem a bit slower...

i removed some javascript to an external file though and now it is much quicker - good enough for me.

thanks for the help.

[Lohith]

Hi,

Please be informed we have initiated the procurement of new version of telerik and we are using trial version to start off with migration and hence we would really appreciate if you could help though the 30 day trail period is over.

We are migrating to new telerik controls and we too face the same issue.  When we hit F5 the pane initially takes width and height much smaller than the screen and then expands.

We also see a difference in the code produced by the same telerik control after upgrade it seems to output width and height inline without we explicitly setting it which might be the probable cause for the issue.

New version of Telerik spitting out this html snippet( 2012.3.1016.40 ).

<div id="RAD_SPLITTER_PANE_CONTENT_ctl00_RadPaneContent"  style="width:192px;height:398px;overflow:auto;background-color:#F3F3F3;">
            <div id="ctl00_ctl00_PanelContentPanel">


Older version of Telerik spitting out the below html.

<div id="RAD_SPLITTER_PANE_CONTENT_RadPaneContent"  style="overflow:auto;background-color:#F3F3F3;">
            <div id="ctl00$PanelContentPanel">

Below it the tags for rad splitter.

    <telerik:RadSplitter ID="RadSplitterHeaderTreeContent" runat="server" HeightOffset="<%# SplitterOffsetHeight %>"
        Height="100%" Width="100%" BackColor="#E6E6E6" VisibleDuringInit="false" OnClientLoaded="OnSplitterLoaded"  OnClientResized="OnSplitterResized">
        <telerik:RadPane ID="RadPaneTree" runat="server" PersistScrollPosition="true" BackColor="#E6E6E6"
            Height="100%" OnClientResized="SetTreeWidthCookie" OnClientCollapsed="SetTreeCollapsedCookie"
            OnClientExpanded="SetTreeExpandedCookie">
            <div class="mymenu">
                <ucTreeView:CentraLineTreeView ID="tree" runat="server" />
            </div>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadsplitbarTreeContent" runat="server" CollapseMode="Forward" />
        <telerik:RadPane ID="RadPaneContent" runat="server" BackColor="#F3F3F3" PersistScrollPosition="false">
            <asp:Panel ID="PanelContent" runat="server">
                <asp:ContentPlaceHolder ID="ct" runat="server" />
            </asp:Panel>
        </telerik:RadPane>
    </telerik:RadSplitter>
 
How can I get rid of this behavior, Also be informed that we do not set the width or height programmatically either at client or the server. I have also tried your suggestion with no go.
Looking forward for your support.  Thanks in advance.

Regards,
Lohitha

 

[Vessy]

Hi Leland,

The experienced behavior is caused by a known bug in the 2012.3.1016 version of the Splitter, connected with the functionality of the VisibleDuringInit property (refer this PITS item). The issue has already been resolved and it is functioning properly in our latest Service Pack (2012.3.1205), so my suggestion is to upgrade to it.

For the time being you can use the following workaround:

.rspHideRadSplitter {
    POSITION: absolute; TOP: -99999px
}

I hope this information is helpful for you.

Regards,
Vesi
the Telerik team