Stylesheet Ordering and Skins

[Developer]

Hello,

I have a web application that is written via UserControls and is hosted in SharePoint. We are using the RadControls for ASP.NET AJAX Q2 2009.

The Container User Control (which, as an aside is loaded by a Page.LoadControl(...) ) looks something like this:
__________________________________________________________________________________________
<div style="display: none;">
<!-- This Div is here to ensure that all necessary css Skins are Loaded by telerik in the proper order
in order for them to be rendered properly in IE 7 of all browsers -->
<telerik:RadInputManager ID="LoadDefaultSkinInputManager" runat="server">
<telerik:TextBoxSetting>
<TargetControls>
<telerik:TargetInput ControlID="LoadDefaultSkinInputManTextBox" />
</TargetControls>
</telerik:TextBoxSetting>
</telerik:RadInputManager>
<asp:TextBox ID="LoadDefaultSkinInputManTextBox" runat="server" />
<telerik:RadComboBox ID="LoadSkinComboBox" runat="server" Skin="Office2007">
</telerik:RadComboBox>
<telerik:RadTextBox ID="LoadSkinTextBox" runat="server" Skin="Office2007">
</telerik:RadTextBox>
</div>

<telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server" EnableAJAX="true">
    <div class="wcss_container" id="WcssContainer" runat="server">
        <asp:PlaceHolder runat="server" ID="ContentTemplatePlaceHolder"></asp:PlaceHolder>
    </div>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel IsSticky="true" ID="ContainerTemplateLoadingPanel" runat="Server">
    <div class="wcss_RadAjaxLoadingPanel">
        <asp:Image ID="ContainerTemplateLoadingPanelImage" runat="server" AlternateText="Loading..."
            Style="" ImageUrl="~/_layouts/images/Epcor/CustomerSelfServe/ajax-loader.gif" />
    </div>
</telerik:RadAjaxLoadingPanel>
__________________________________________________________________________________________

Within the PlaceHolder, another User Control is loaded with various controls, each having a RadMultiPage control, hosting controls with a combination of TextBoxes with RadInputManagers, RadTextBoxes, RadComboBoxes, and RadCalendars.
The div that you see there was added because some of the necessary skin files  (i.e. for RadComboBoxes not in the RadMultiPage) weren't being embedded to the page during the initial load.

We are using the "Office2007" Skin. There is an entry in the web.config for [<add key="Telerik.Skin" value="Office2007"/>].

I had to play with the order of the controls within the hidden div in order to ensure that the scripts were being loaded in the right order, as the order in which the controls were being embedded affected the final styling of the RadInput Controls (especially in IE7).

Without the hidden div, (relying on the RadMultiPage control loading), the order was:

1. /*Telerik RadInput Default Skin*/
2. /* RadComboBox Default skin */
3. /*Telerik RadInput Office2007 Skin*/
4. .RadToolTip_Default
5. /*Telerik RadInput Default Skin*/
6. /* Telerik RadAjaxLoadingPanel Common CSS */

but with the hidden div, the order has chagned to: 

1. /*Telerik RadInput Office2007 Skin*/
2. /* RadComboBox Default skin */
3. /*Telerik RadInput Office2007 Skin*/
4. .RadToolTip_Office2007
5. /* Telerik RadAjaxLoadingPanel Common CSS */
6. /* Telerik RadAjaxLoadingPanel Office2007 Skin */

Having these hidden controls at the very beginning of the page (before any other Radinput Controls), has ensured that the controls will render in all browsers I'm testing in (IE6, 7, 8, FF 2, 3, Safari4, Opera 9).

It would certainly be nice if the RadStyleManager (or whatever the magic control behind the scenes is that controls the ordering / inclusion of the controls) would put them in proper order in future versions.