RadListBoxes disappear in IE

9 posts, 0 answers
  1. Robert Helm
    Robert Helm avatar
    54 posts
    Member since:
    Feb 2009

    Posted 10 Oct 2012 Link to this post

    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.



  2. Robert Helm
    Robert Helm avatar
    54 posts
    Member since:
    Feb 2009

    Posted 10 Oct 2012 Link to this post

    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>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 12 Oct 2012 Link to this post

    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.
  5. Robert Helm
    Robert Helm avatar
    54 posts
    Member since:
    Feb 2009

    Posted 12 Oct 2012 Link to this post

    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.

  6. Robert Helm
    Robert Helm avatar
    54 posts
    Member since:
    Feb 2009

    Posted 22 Oct 2012 Link to this post

    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.

  7. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 24 Oct 2012 Link to this post

    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.
  8. Robert Helm
    Robert Helm avatar
    54 posts
    Member since:
    Feb 2009

    Posted 24 Oct 2012 Link to this post

    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.
  9. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 25 Oct 2012 Link to this post

    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.
  10. Robert Helm
    Robert Helm avatar
    54 posts
    Member since:
    Feb 2009

    Posted 30 Oct 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017