RadListBox Breaks IE8

5 posts, 0 answers
  1. KO
    KO avatar
    17 posts
    Member since:
    Jun 2012

    Posted 16 Aug 2012 Link to this post

    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>

  2. KO
    KO avatar
    17 posts
    Member since:
    Jun 2012

    Posted 22 Aug 2012 Link to this post

    Anyone had time to look into this yet? Please let me know if you need more code.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 27 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. KO
    KO avatar
    17 posts
    Member since:
    Jun 2012

    Posted 04 Sep 2012 Link to this post

    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.
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 10 Sep 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017