RadListBox Breaks IE8

[KO]

I have created a server control that contains various Telerik controls, however it seems whenever I include a RadListBox control on the page, it completely breaks the entire styling/rending of the page that the control is included in. The page that the control gets loaded into also gets loaded into a RadWindow. I tried commenting out all events and even the managed server side stuff that modifies the controls, and it still breaks the entire page. It seems like something goes wrong in rendering and one of the managers can't load the skins/CssClass(es) somehow, or maybe the manager breaks in applying them. I also don't get any javascript errors or exceptions when debugging so I have no idea how to troubleshoot this.

AddEditUser.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddEditUser.ascx.cs" Inherits="Caw.ClientAccessWeb.Main.Users.AddEditUser" %>

<telerik:RadToolBar ID="AddEditUserToolBar" Width="100%" runat="server" OnButtonClick="AddEditUserToolBar_Click">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Save Changes" CommandName="Save" CommandArgument="" ImageUrl="~/Main/Content/Images/Icons/check.png" CausesValidation="true" />
        <telerik:RadToolBarButton runat="server" Text="Save And Add Another" CommandName="Save" CommandArgument="true" ImageUrl="~/Main/Content/Images/Icons/check.png" CausesValidation="true" Visible="false" />
        <telerik:RadToolBarButton runat="server" Text="Cancel" CommandName="Cancel" ImageUrl="~/Main/Content/Images/Icons/delete.png" CausesValidation="false" />
    </Items>
</telerik:RadToolBar>

<div >

<div class="PageViewHeader" >
    <asp:Label ID="AddEditLabel" runat="server" CssClass="LabelFont"></asp:Label>
</div>

<div class="riTextBox"></div>

<input type="hidden" id="UserIdHidden" runat="server" />
<input type="hidden" id="ClientIdHidden" runat="server" />
<input type="hidden" id="CurrentUsernameHidden" runat="server" />

<div style="width: 100%">
    <telerik:RadTextBox ID="UsernameTextBox" runat="server" Label="Username" Width="400px" WrapperCssClass="EmailRTBWrapper" />
    <asp:Label ID="UsernameRequiredImage" runat="server" Visible="true" CssClass="TelerikFont">*</asp:Label>
        <asp:RequiredFieldValidator
            ID="UserNameRequired"
            runat="server"
            ControlToValidate="UsernameTextBox"
            Display="Dynamic"
            ErrorMessage="Username is required"
            EnableClientScript="true"
            CssClass="TelerikFont"
            ForeColor="DarkRed" Width="45%"/>
        <asp:RegularExpressionValidator
            ID="UsernameExpression"
            runat="server"
            ControlToValidate="UsernameTextBox"
            ValidationExpression=""
            ErrorMessage="Username already exists"
            Display="Dynamic"
            CssClass="TelerikFont"
            ForeColor="DarkRed" />
</div>
<div style="width: 100%">
<telerik:RadTextBox ID="FullNameTextBox" runat="server" Label="Full Name" Width="400px" WrapperCssClass="EmailRTBWrapper" />
<asp:Label ID="FullNameRequiredImage" runat="server" Visible="true" CssClass="TelerikFont">*</asp:Label>
    <asp:RequiredFieldValidator
        ID="FullNameRequired"
        runat="server"
        ControlToValidate="FullNameTextBox"
        Display="Dynamic"
        ErrorMessage="Full Name is required"
        EnableClientScript="true"
        CssClass="TelerikFont"
        ForeColor="DarkRed" />
</div>
<div style="width: 100%">
<telerik:RadTextBox ID="EmailTextBox" runat="server" Label="Email Address" Width="400px" WrapperCssClass="EmailRTBWrapper" />
    <asp:RegularExpressionValidator
            ID="EmailExpression"
            runat="server"
            ControlToValidate="EmailTextBox"
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
            ErrorMessage="Invalid email address"
            Display="Dynamic"
            CssClass="TelerikFont"
            ForeColor="DarkRed"/>
</div>
<p class="HelpText TelerikFont" style="padding-left: 5px;"><span style="font-weight:bold;">Password Requirements:</span> <%= Configuration.PasswordPolicy.ToString() %></p>
<div style="width: 100%">
<telerik:RadTextBox ID="PasswordTextBox" runat="server" Label="Password" Width="400px" WrapperCssClass="EmailRTBWrapper" TextMode="Password" />
<asp:Label ID="PasswordRequiredImage" runat="server" Visible="false" CssClass="TelerikFont">*</asp:Label>
    <asp:RequiredFieldValidator
        ID="PasswordRequired"
        runat="server"
        ControlToValidate="PasswordTextBox"
        Display="Dynamic"
        ErrorMessage="Password is required"
        EnableClientScript="true"
        CssClass="TelerikFont"
        Enabled="false"
        ForeColor="DarkRed" />
    <asp:RegularExpressionValidator
        ID="PasswordLengthExpression"
        runat="server"
        ControlToValidate="PasswordTextBox"
        ValidationExpression=""
        ErrorMessage=""
        Display="Dynamic"
        CssClass="TelerikFont"
        ForeColor="DarkRed" />
    <asp:RegularExpressionValidator
        ID="PasswordAlphaExpression"
        runat="server"
        ControlToValidate="PasswordTextBox"
        ValidationExpression="^.*(?=.*[a-z]|[A-Z]).*$"
        ErrorMessage="Password must contain at least one alpha character"
        Display="Dynamic"
        Enabled="false"
        CssClass="TelerikFont"
        ForeColor="DarkRed" />
    <asp:RegularExpressionValidator
        ID="PasswordNumberExpression"
        runat="server"
        ControlToValidate="PasswordTextBox"
        ValidationExpression="^.*(?=.*[\d]).*$"
        ErrorMessage="Password must contain at least one number"
        Display="Dynamic"
        Enabled="false"
        CssClass="TelerikFont"
        ForeColor="DarkRed" />
    <asp:RegularExpressionValidator
        ID="PasswordSpecialExpression"
        runat="server"
        ControlToValidate="PasswordTextBox"
        ValidationExpression="^.*(?=.*[\W]).*$"
        ErrorMessage="Password must contain at least one special character"
        Display="Dynamic"
        Enabled="false"
        CssClass="TelerikFont"
        ForeColor="DarkRed" />
    <asp:RegularExpressionValidator
        ID="PasswordMixedCaseExpression"
        runat="server"
        ControlToValidate="PasswordTextBox"
        ValidationExpression="^.*(?=.*[a-z])(?=.*[A-Z]).*$"
        ErrorMessage="Password must contain at least one lowercase and one uppercase letter"
        Display="Dynamic"
        Enabled="false"
        CssClass="TelerikFont"
        ForeColor="DarkRed" />
</div>
<br />

<telerik:RadButton ID="AccountLockedCheckBox" runat="server" Text="Account Locked" ButtonType="ToggleButton" AutoPostBack="false"
    ToggleType="CheckBox" CssClass="SettingsRadCheckBox" />
<telerik:RadButton ID="Permission_OverrideIpRestrictionsCheckBox" runat="server" Text="Override IP Restrictions" AutoPostBack="false"
    ButtonType="ToggleButton" ToggleType="CheckBox" Visible="false" CssClass="SettingsRadCheckBox" />
<input type="hidden" ID="Permission_OverrideIpRestrictionsHidden" runat="server" value="OverrideIpRestrictions"
    Visible="false"/>
<telerik:RadButton ID="PasswordExpiredCheckBox" runat="server" Text="Password Expired" ButtonType="ToggleButton" AutoPostBack="false"
    ToggleType="CheckBox" CssClass="SettingsRadCheckBox" />

<br /><br />

<telerik:RadListBox ID="ClientSourceListBox" runat="server" DataKeyField="Number" DataValueField="Id" Height="200px"
    CssClass="LeftListBox" ToolTip="Select Clients For The New User To Access"
    AllowTransfer="true" TransferMode="Move" TransferToID="ClientDestinationListBox" AllowTransferOnDoubleClick="true"
    SelectionMode="Multiple" />
<telerik:RadListBox ID="ClientDestinationListBox" runat="server" DataKeyField="Number" DataValueField="Id" Height="200px"
    CssClass="RightListBox" AllowTransferOnDoubleClick="true" SelectionMode="Multiple"
    ToolTip="Clients The New User May Access" />


<fieldset id="PermissionFieldSet" runat="server" class="rfdRoundedCorners">
    <legend>Permissions</legend>
</fieldset>
<telerik:RadScriptBlock runat="server">
    <script type="text/javascript">

        // This function may be used as a utility or event handler function. Sender is a RadButton object from event or
        // ID of a hierarchy control element to find object from.
        function EnableOptions(sender, eventArgs) {

            // NOTE: The sending button handle object contains the fieldSetId in the RadButton's CommandArgument attribute
            var setElement = null;
            if ( typeof(sender) == "object" ) {
                // if the type is object the function was called as event handler
                setElement = sender;
            }
            else {
                // the ID was passed as a string from function called as utility
                setElement = $find(sender);
            }

            var fieldElement = $("#" + setElement.get_commandArgument())[0];
            var cboxes = fieldElement.getElementsByTagName('a');

            for (var j = 0; j < cboxes.length; j++) {
                var subObject = $find(cboxes[j].id);
                var checked = setElement.get_checked();
                if (!checked) subObject.set_checked(false);
                subObject.set_enabled(checked);
            }
        }

        function LoadWindow() {
            <%= LoadScripts %>
        }

        $.SiteUtilities_PageLoad(function() { LoadWindow(); });
    </script>
</telerik:RadScriptBlock>

</div>

[KO]

Anyone had time to look into this yet? Please let me know if you need more code.

[Dimitar Terziev]

Hi Kelson,

I've inspected the provided mark-up, but there is nothing unusual which  might be causing such behavior. Could you provide a screenshot of the layout with and without the RadListBox?

Kind regards,
Dimitar Terziev
the Telerik team

[KO]

Hi Dimitar I would be happy to provide some screenshots. Please note how it seems nearly all CSS styles are no longer being applied in the "window loaded.png" and "add new user messed.png" screenshots.

[Dimitar Terziev]

Hi Kelson,

Based on the screenshots provided and the information from your last post, it seems to me that the problem might be related to a web resources not being loaded. Could you please add a RadStyleSheetManager control to your page and let me know of the results? Also could you verify the version of the controls that you are using?

Kind regards,
Dimitar Terziev
the Telerik team