This is a migrated thread and some comments may be shown as answers.

RadListBox Breaks IE8

4 Answers 47 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
KO
Top achievements
Rank 1
KO asked on 16 Aug 2012, 05:19 PM
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>

4 Answers, 1 is accepted

Sort by
0
KO
Top achievements
Rank 1
answered on 22 Aug 2012, 11:03 PM
Anyone had time to look into this yet? Please let me know if you need more code.
0
Dimitar Terziev
Telerik team
answered on 27 Aug 2012, 01:26 PM
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.
0
KO
Top achievements
Rank 1
answered on 04 Sep 2012, 04:34 PM
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.
0
Dimitar Terziev
Telerik team
answered on 10 Sep 2012, 10:00 AM
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.
Tags
ListBox
Asked by
KO
Top achievements
Rank 1
Answers by
KO
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or