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

RadListBoxes disappear in IE

8 Answers 97 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Robert Helm
Top achievements
Rank 1
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

Sort by
0
Robert Helm
Top achievements
Rank 1
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 />
                    <br />
                </td>
            </tr>
        </table>
    </center>
    </div>
    <csla:CslaDataSource ... />
    <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>

0
Bozhidar
Telerik team
answered on 12 Oct 2012, 07:59 AM
Hi Robert,

The page you provided contains a lot of code that's dependent on external libraries and other parts of your project. Could you try to simplify the page as much as possible, leaving only the markup relevant to the issue, so that we can run it locally.
 
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.
0
Robert Helm
Top achievements
Rank 1
answered on 12 Oct 2012, 12:55 PM
Thank you for the suggestion, Bozhidar. In trying to meet your request, I think I have isolated the problem: Somehow it is the Peter Blum Data Entry Suite validators. Not sure how yet, because I use DES all over the place along with Telerik controls and have no problems. But when I remove the validators from the page, there are no issues with the RadListBox disappearing when changing or tabbing out of the controls with validators.

If I figure out exactly what's going on, I'll add it to this thread.

0
Robert Helm
Top achievements
Rank 1
answered on 22 Oct 2012, 01:46 PM
I haven't been able to solve this issue. I've tried adding Script managers, page managers, etc.
It's a fairly simple page and this is only happening with the RadListBox. All the other pages use Rad controls and Peter Blum validators with no problems.

Any ideas?

Thanks for any help.

0
Bozhidar
Telerik team
answered on 24 Oct 2012, 12:46 PM
Hello Robert,

Could you send the page that reproduces the issue in it's simplest form, so that I can attempt to troubleshoot it locally.
 
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.
0
Robert Helm
Top achievements
Rank 1
answered on 24 Oct 2012, 03:47 PM
Thanks Bozhidar. I will try to do that, but in the mean time I asked Peter Blum (since it's his Validators that have a hand in the issue) and he seemed to think it is a style sheet issue. So I'm going to poke around there when I get the chance and will post a solution if I find one. Or I'll strip the code down and post it here as you requested, when I get a chane. Thanks again.
0
Bozhidar
Telerik team
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.
0
Robert Helm
Top achievements
Rank 1
answered on 30 Oct 2012, 12:02 PM
OK, it was a style attribute.

The <div>s that I was using to place my controls in had style="position: relative;". Once I removed ="position: relative;" , there are no problems.

Thanks again for the help.
Tags
ListBox
Asked by
Robert Helm
Top achievements
Rank 1
Answers by
Robert Helm
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or