In IE 9 RADListBox not showing items when I have headertemplate and height specified.

[Asankhan]

Hi 

I have recently upgraded my browser to IE9 (version 9.0.8112.16421) , all of sudden AJAX Radlistbox stopped showing items on browser when I have headertemplate and height specified. But technically items are available when I access through client API.

Is there anyway to fix this ? in chrome its working fine

<telerik:RadListBox ID="RadListBox1" runat="server" Height ="400px"  Width="250px">
         <ButtonSettings TransferButtons="All"></ButtonSettings>
         <Items>
             <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gssdf" Value="fg89fgf" />
             <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="565" Value="fg787fgf" />
             <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs676sdf" Value="f787gfgf" />
             <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs565sdf" Value="fg87fgf" />
         </Items>
         <HeaderTemplate >
              <input id="chkALLExpr" type="checkbox" onclick="ChkALLExpressions();" />
             Select ALL
         </HeaderTemplate>
        <%-- <FooterTemplate>
             <input id="cmdRemoveExpr" type="button" value="Delete" onclick="cmdDeleteExpression_Click();" />
             <input id="cmdNewExpression" type="button" value="New Expression" onclick="cmdNewExpression_Click();" />
         </FooterTemplate>--%>
     </telerik:RadListBox>

Thanks
Asankhan 

[Asankhan]

Can anyone from Telerik technical team address this issue ?

Thanks
Asankhan 

[Peter Filipov]

Hi Asankhan,

We are familiar with this issue and it has already been logged.
To avoid it please set a header and a footer template.
 
Sample reproducing the issue:

<telerik:RadScriptManager runat="server" ID="RadScriptManager">
       </telerik:RadScriptManager>
       <telerik:RadListBox ID="RadListBox1" runat="server" Height="400px" Width="250px">
           <ButtonSettings TransferButtons="All"></ButtonSettings>
           <Items>
               <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gssdf" Value="fg89fgf" />
               <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="565" Value="fg787fgf" />
               <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs676sdf" Value="f787gfgf" />
               <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs565sdf" Value="fg87fgf" />
           </Items>
          <%-- <HeaderTemplate>
               <input id="chkALLExpr" type="checkbox" onclick="ChkALLExpressions();" />
               Select ALL
           </HeaderTemplate>--%>
            <FooterTemplate>
            <input id="cmdRemoveExpr" type="button" value="Delete" onclick="cmdDeleteExpression_Click();" />
            <input id="cmdNewExpression" type="button" value="New Expression" onclick="cmdNewExpression_Click();" />
        </FooterTemplate>
       </telerik:RadListBox>

Working sample:

<telerik:RadScriptManager runat="server" ID="RadScriptManager">
        </telerik:RadScriptManager>
        <telerik:RadListBox ID="RadListBox1" runat="server" Height="400px" Width="250px">
            <ButtonSettings TransferButtons="All"></ButtonSettings>
            <Items>
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gssdf" Value="fg89fgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="565" Value="fg787fgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs676sdf" Value="f787gfgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs565sdf" Value="fg87fgf" />
            </Items>
            <HeaderTemplate>
                <input id="chkALLExpr" type="checkbox" onclick="ChkALLExpressions();" />
                Select ALL
            </HeaderTemplate>
             <FooterTemplate>
             <input id="cmdRemoveExpr" type="button" value="Delete" onclick="cmdDeleteExpression_Click();" />
             <input id="cmdNewExpression" type="button" value="New Expression" onclick="cmdNewExpression_Click();" />
         </FooterTemplate>
        </telerik:RadListBox>

Regards,
Peter Filipov
the Telerik team

[Asankhan]

Hi Peter, thanks for your inputs ,I have tried both the cases with Height and without ,its not working .Attached the code and screen shot.

Thanks
Asankhan 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/Reflection%20.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadListBox ID="RadListBox2" runat="server" Height="400px" Width="250px">
            <ButtonSettings TransferButtons="All"></ButtonSettings>
            <Items>
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gssdf" Value="fg89fgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="565" Value="fg787fgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs676sdf" Value="f787gfgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs565sdf" Value="fg87fgf" />
            </Items>
            <HeaderTemplate>
                <input id="chkALLExpr" type="checkbox" onclick="ChkALLExpressions();" />
                Select ALL
            </HeaderTemplate>
            <FooterTemplate>
                <input id="cmdRemoveExpr" type="button" value="Delete" onclick="cmdDeleteExpression_Click();" />
                <input id="cmdNewExpression" type="button" value="New Expression" onclick="cmdNewExpression_Click();" />
            </FooterTemplate>
        </telerik:RadListBox>
        <hr />
        <telerik:RadListBox ID="RadListBox1" runat="server" Width="250px">
            <ButtonSettings TransferButtons="All"></ButtonSettings>
            <Items>
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gssdf" Value="fg89fgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="565" Value="fg787fgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs676sdf" Value="f787gfgf" />
                <telerik:RadListBoxItem runat="server" ListBox="RadListBox1" Text="gs565sdf" Value="fg87fgf" />
            </Items>
            <HeaderTemplate>
                <input id="chkALLExpr" type="checkbox" onclick="ChkALLExpressions();" />
                Select ALL
            </HeaderTemplate>
            <FooterTemplate>
                <input id="cmdRemoveExpr" type="button" value="Delete" onclick="cmdDeleteExpression_Click();" />
                <input id="cmdNewExpression" type="button" value="New Expression" onclick="cmdNewExpression_Click();" />
            </FooterTemplate>
        </telerik:RadListBox>
    </div>
    </form>
</body>
</html>

[Peter Filipov]

Hi Asankhan,

I tested your sample code below and everything appears fine. I am sending you a video how I have tested the project.

Please let me know if I am missing something.

Kind regards,
Peter Filipov
the Telerik team

[Faifal]

I am having the same issue as described above. If I hard code the items directly into the HTML as it is in your example the items appear. but if I bind new items to the listbox the new items do not appear. 

[Peter Filipov]

Hello Faifal,

I tested the described case with the latest version of our controls and everything works fine. Could you please send me a working sample project that demonstrates the issue to examine it locally?
Also clarify the version of our controls and browser that you use.

All the best,
Peter Filipov
the Telerik team

[Mac P]

Is there any solution to this problem?

I am having the same issue. If I have headertemplate as label of listbox it doesnt render listItems in IE intially. It does render once the page is posted back.

[Peter Filipov]

Hi Mac,

Could you please setup a sample project that reproduces the issue and send it for a local test ?

Kind regards,
Peter Filipov
the Telerik team

[Thomas Möchel]

Hi ,
I had the same problem using Version v4.0.30319, setting Header and Footer Templates did not help. By working through the DOM I have tried to set not the height directlty but by a CssClass "AssignObjects"

<telerik:RadListBox SelectionMode="Multiple" runat="server" ID="RadListBoxSelected"
               CssClass="AssignObjects" Width="200px" TransferMode="Move" AllowTransfer="true" TransferToID="RadListBoxAll">
               <HeaderTemplate>
                   <div id="AssignObjectsHeaderDiv" class="AssignObjectsHeader">
                       <asp:Label runat="server" CssClass="AssignObjectsLabel" ID="lblSourceSelected" Text=""></asp:Label>
                   </div>
               </HeaderTemplate>
           </telerik:RadListBox>
           <telerik:RadListBox SelectionMode="Multiple" runat="server" ID="RadListBoxAll" CssClass="AssignObjects" Width="200px">
               <HeaderTemplate>
                   <div id="AssignObjectsHeaderDiv" class="AssignObjectsHeader">
                       <asp:Label runat="server" CssClass="AssignObjectsLabel" ID="lblSourceAll" Text=""></asp:Label>
                   </div>
               </HeaderTemplate>
           </telerik:RadListBox>

Below the Class Definition.

.AssignObjects .rlbList{
    height: 200px !important;
    overflow: auto;
}

Hope this helps
Thomas

[mathieu cupryk]

I have the same issue and I need to move it to the right.

[mathieu cupryk]

I have the same issue and I need to move it to the right.

[Peter Filipov]

Hello guys,

I am still not able to reproduce the issue. Could give us more details about your project - Telerik.Web.UI dll version and some sample code to reproduce the issue. Keep in mind that the classic controls are no longer supported.

Regards,
Peter Filipov
the Telerik team

[Srikanth]

Hello,

      I am having the same issue. I am trying to add to RadList using JQuery after Ajax call to WCF service. Do you have any solution for this issue.

   I used to have Microsoft ListBox which used to work fine but after installing Telerik controls, it stopped working then i switched my code to use Telerik RadListBox control.

  When i loop through items i can see items in there but i can't see them on ListBox.

Please help me to resolve this issue. I am using IE9 only. Thanks.

Thanks,
Srikanth

[Bozhidar]

Hello Srikanth,

I'm not entirely sure how you "add a RadListBox using jQuery", but in general the RadControls are server controls and cannot be created purely on the client.
 
Regards,
Bozhidar
the Telerik team

[George]

Well it seems to be working fine in IE9 but in IE8 it is definitely broken. It's broken on your demo also. Please view the following demo with IE8: http://demos.telerik.com/aspnet-ajax/listbox/examples/applicationscenarios/insertitem/defaultcs.aspx

[Bozhidar]

Hi George,

I tested the demo under IE8, however I didn't find any problems with it. Please review the following screen capture:
http://screencast.com/t/yqJZPZHR9QA

If I'm missing something, please elaborate a bit on the exact issue, as well as the steps to reproduce it.
 
Regards,
Bozhidar
Telerik

[George]

This is what I see. I'm using IE10 and using IE8 mode.

[Bozhidar]

Hi George,

I successfully reproduced the problem under IE10. I've already logged it for fixing and updated you telerik points. Than you for reporting this to us.
 
Regards,
Bozhidar
Telerik

[JS]

Hello Bozhidar,

I downloaded the latest update, however the problem still exists for IE10.
Any idea when this will be fixed?

[Bozhidar]

Hello,

We are still working on the issue, but we'll do our best to include a fix in our upcoming Q3 2013 release.
 
Regards,
Bozhidar
Telerik

[Klaus]

I ran into this problem, where my code was not backwards compatibable with IE 8 because I had set the height
property of the RadListBox. 

I was also trying to add RadListBoxItems on the client side, and they were not appearing in the ListBox.

The way I solved this issue was not specify the height property and just set it on the client side in javascript.

You can register a startup script and set the following property of the RadListBox

sender._groupElement.style.height = "200px";


sender is the ListBox in the code above

Hope this helps

[Chris]

Has this been fixed?  I'm having the same problem with IE10 and the latest Telerik controls.  Works fine in compatibility mode but that's not an option for us as the rest of the pages do not work in compatibility mode.

[Bozhidar]

Hello Chris,

We currently working on fixing this, as well as other issues in RadListBox. The fixes should be visible in our next Official Release.

Regards,
Bozhidar
Telerik