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

RadListBoxes disappear in IE

8 Answers 95 Views

ListBox

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

Robert Helm asked on 10 Oct 2012, 03:21 PM

I have a page that doesn't use AJAX or partial postbacks. It contains a DateTextBox, RadComboBox and a RadGrid.

I added 4 RadListBoxes to the page. I have JQuery to show/hide the table that the RadListBoxes are in.

1rst problem: When the page loads in IE, the RadListBoxes aren't there. I can ge them to appear by clicking the show/hide icon that uses JQuery.

2nd Problem: If I so much as hover over the RadComboBox, the RadListBoxes disappear again. But it's only the RadComboBox control that does this and only in IE (IE9 is what I'm using).

I've removed the JQuery to rule it out. The page still doesn't render the RadListBoxes on load.
There are no other settings, properties or Javascript that is showing/hiding anything, especially around the RadComboBox.

I replaced the RadComboBox with an ASP DropDownList. The RadListBoxes show up on load, but if I select something in the DropDownList, the RadListBoxes disappear again.

8 Answers, 1 is accepted

answered on 10 Oct 2012, 03:50 PM

I decied to post the markup in the ASPX page for good measure.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterGui.master" AutoEventWireup="true"

CodeFile="GroupSummary.aspx.cs" Inherits="GroupSummary" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content5" ContentPlaceHolderID="contentMain" runat="Server">

<script type="text/javascript">

var offsetHeight = 293;

function ClientResize() {

var txtBox = document.getElementById('<%=txtClientHeight.ClientID %>');

var txtBox2 = document.getElementById('<%=txtClientHeight2.ClientID %>');

txtBox2.value = getWindowHeight();

txtBox.value = (getWindowHeight() - offsetHeight);

var s = '<%=grdDetail.ClientID %>';

s = s + "_GridData";

var scrollArea = document.getElementById(s);

if (scrollArea != null) {

scrollArea.style.height = ((getWindowHeight() < offsetHeight ? offsetHeight : getWindowHeight()) - offsetHeight) + "px";

}

function getWindowHeight() {

var windowHeight = 0;

if (typeof (window.innerHeight) == 'number') {

windowHeight = window.innerHeight;

}

else {

if (document.documentElement && document.documentElement.clientHeight) {

windowHeight = document.documentElement.clientHeight;

}

else {

if (document.body && document.body.clientHeight) {

windowHeight = document.body.clientHeight;

}

return windowHeight;

}

function btnExport_onclick(url) {

var rptType = document

.getElementById("<%= selReportType.ClientID %>").options[document.getElementById("<%= selReportType.ClientID %>").selectedIndex].value;

var agency = $find("<%= ddlAgency.ClientID %>")._value;

var st = document.getElementById("<%= dtbStartDate.ClientID %>").value;

var en = document.getElementById("<%= dtbEndDate.ClientID %>").value;

if ((agency == "" || st == "" || en == "") || ($find("<%= grdDetail.ClientID %>" + "_ctl00") == null)) {

alert('You must complete a search before clicking the \"Export\" button.');

return false;

}

window.open(url + "&" + "selReportType=" + rptType, "export");

return false;

}

</script>

<asp:HiddenField ID="txtClientHeight2" runat="server"></asp:HiddenField>

<asp:HiddenField ID="txtClientHeight" runat="server"></asp:HiddenField>

<div style="position: relative; font-size: 18px; font-weight: bold; line-height: 25px;

color: #444444; letter-spacing: -1px; padding: 0px 0px 2px 0px; margin-bottom: 10px;">

<table style="width: 100%;">

<tr>

<td style="text-align: left;">

PAGE TITLE

<asp:Label ID="lblError" runat="server" Text="" CssClass="error-message"></asp:Label>

</td>

<td style="text-align: right; width: 250px; vertical-align: top;">

</td>

<td style="text-align: right; vertical-align: top; width: 360px; padding-right:8px;">

<asp:DropDownList ID="selReportType" runat="server" CssClass="Controls">

</asp:DropDownList>

<input class="Controls" id="btnExport" type="button" value="Export" style="width:65px; height:25px;"

onclick='return btnExport_onclick("<%=exportURL %>")' />

</td>

</tr>

</table>

</div>

<div style=

"position: relative; line-height: 25px; color: #444444; letter-spacing: -1px; padding: 0px 0px 2px 0px; margin-bottom: 10px;"

>

<table style="width: 100%;">

<tr>

<td style="text-align: left; vertical-align: top; padding-left: 100px;" colspan="2">

<asp:Label ID="lblAgency" runat="server" CssClass="Controls" Font-Bold="True" EnableViewState="False"

AssociatedControlID="ddlAgency"> Agency:

</asp:Label>

<asp:DropDownList runat="server" ID="ddlAgency" DataSourceID="cslaAgency" DataValueField="AgencyID"

DataTextField="AgencyName" DropDownWidth="250px"

AppendDataBoundItems="true" Skin="Vista" Width="250px" Font-Size="8pt">

<asp:ListItem Text="Select" Value=""/>

</asp:DropDownList>

<des:RequiredTextValidator ID="rtvddlAgency" runat="server" ControlIDToEvaluate="ddlAgency"

ErrorMessage="Please select an Agency" ShowRequiredFieldMarker="false" UnassignedValues="|--Select--">

<ErrorFormatterContainer>

<des:TooltipImageErrorFormatter ImageURL="~/Images/error_small.png" Display="Dynamic" />

</ErrorFormatterContainer>

</des:RequiredTextValidator>

</td>

<td>

<asp:Label ID="lblFrom" runat="server" CssClass="Controls" Font-Bold="True" EnableViewState="False"

AssociatedControlID="dtbStartDate"> Date Range:

</asp:Label>

<des:DateTextBox ID="dtbStartDate" runat="server" CssClass="DateTextBox" AutoHint="false"

Width="58px" PopupCalendar-ToggleImageUrl="~/Images/calendar_view_month.png">

</des:DateTextBox>

<des:RequiredTextValidator.../>

<des:RangeValidator ... />

<des:DataTypeCheckValidator... />

<asp:Label ID="lblTo" runat="server" CssClass="Controls" Font-Bold="True" EnableViewState="False"

AssociatedControlID="dtbEndDate"> to:

</asp:Label>

<des:DateTextBox ID="dtbEndDate" runat="server" CssClass="DateTextBox" AutoHint="false"

Width="58px" PopupCalendar-ToggleImageUrl="~/Images/calendar_view_month.png">

</des:DateTextBox>

<des:RequiredTextValidator... />

<des:RangeValidator... />

<des:DataTypeCheckValidator... />

<des:CompareTwoFieldsValidator... />

</td>

<td id="tdBtnSubmit" style="text-align: right; padding-left:5px; vertical-align:bottom;" rowspan="3">

<des:Button ID="btnSubmit" Text="Search" runat="server" OnClick="btnSubmit_Click" />

</td>

</tr>

<tr style="width: 100%;">

<td colspan="5">

<table style="width: 100%;">

<tr>

<td id="tdGroupOptions" class="RptGrpClass" style="border-bottom: solid 2px #dddddd; width:100%;" >

Report Group Filters

</td>

</tr>

</table>

<table id="tGroupLists">

<tr>

<td style="padding-left:40px;">

<asp:Label ID="Label1" runat="server" CssClass="Controls" Font-Bold="True"> Choose

</asp:Label>

</td>

<td colspan="1" style="text-align:right; padding-right:50px;">

<asp:Label ID="lblGroup1" runat="server" CssClass="Controls" Font-Bold="True"> Group 1

</asp:Label>

</td>

<td style="width:75px;">

</td>

<td >

<asp:Label ID="Label2" runat="server" CssClass="Controls" Font-Bold="True"> Choose

</asp:Label>

</td>

<td colspan="1" style="text-align:right; padding-right:50px;">

<asp:Label ID="lblGroup2" runat="server" CssClass="Controls" Font-Bold="True"> Group 2

</asp:Label>

</td>

</tr>

<tr style="width:100%">

<td colspan="2" style="padding-left:40px;">

<telerik:RadListBox ID="RadListBoxMain1" runat="server" Height="175px" Width="175px"

AllowTransfer="true" TransferToID="RadListBox1"

DataSourceID="cslaPayerRadListBoxMain1" Skin="Vista" SelectionMode="Multiple"

DataValueField="ValueCode" DataTextField="ValueDescription">

</telerik:RadListBox>

<telerik:RadListBox ID="RadListBox1" runat="server" Height="175px" Width="175px"

AllowDelete="false">

</telerik:RadListBox>

</td>

<td style="width:75px;">

</td>

<td colspan="2">

<telerik:RadListBox ID="RadListBoxMain2" runat="server" Height="175px" Width="175px"

AllowTransfer="true" TransferToID="RadListBox2"

DataSourceID="cslaPayerRadListBoxMain2" Skin="Vista" SelectionMode="Multiple"

DataValueField="ValueCode" DataTextField="ValueDescription">

</telerik:RadListBox>

<telerik:RadListBox ID="RadListBox2" runat="server" Height="175px" Width="175px"

AllowDelete="false">

</telerik:RadListBox>

</td>

</tr>

</table>

</td>

</tr>

</table>

<table style="width: 100%;">

<tr>

<td colspan="5">

<des:ValidationSummary ID="ValidationSummary1" runat="server" AutoUpdate="true" />

</td>

</tr>

</table>

</div>

<div>

<center>

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align: center;

height: 100%;">

<tr>

<td valign="top" align="left">

<telerik:RadGrid ..../>

<asp:Label ID="lblGridMessage" runat="server" Text="" CssClass="error-message"></asp:Label>

<br />

</td>

</tr>

</table>

</center>

</div>

<csla:CslaDataSource ... />

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="contentBreadcrumb" runat="Server">

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Home.aspx">Home </asp:HyperLink>

>

</asp:Content>

answered on 25 Oct 2012, 07:12 AM

Hi Robert,

I think the stylesheet might be indeed the reason for the issue. IE has a known limit for the stylesheets loaded on the page. You can read more about it here:
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ad1b6e88-bbfa-4cc4-9e95-3889b82a7c1d

Perhaps what is going on here is that the combined number of stylesheets coming from both libraries exceeds this limit, and the styles for the ListBox are not loaded. You can easily verify that using the free tool fiddler and observe how many stylesheets are loaded on the page that is problematic.

One possible solution is to use RadStyleSheetManager. Please try it out and let me know how it goes.

Kind regards,
Bozhidar
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadListBoxes disappear in IE

8 Answers, 1 is accepted