RadWindow not working on IE9

8 posts, 0 answers
  1. John
    John avatar
    7 posts
    Member since:
    Mar 2013

    Posted 29 Apr 2015 Link to this post

    I used the following code to display data in a radwindow, which contains a repeater control. But the columns on one row shifted, as can be seen from the attachment. The same works fine on IE8. Does anybody know how to fix this issue? I am using Telerik for asp.net ajax version 2012.3.1308.35

    <telerik:RadWindow ID="rwinDetail" runat="server" RestrictionZoneID="ContentTemplateZone" Modal="false" Width="450" Height="300" Behaviors="Close,Move,Resize,Minimize" Visible="True"> <ContentTemplate> <div style="font-size:small;" id="rwinDetail"> <asp:Repeater ID="repDetail" runat="server">
     <HeaderTemplate> <table id="tableDetail" cellspacing="0" cellpadding="0">
    <tr>
     <td colspan="2">
     <asp:Button
    ID="btnDetail"
    runat="server"
    CommandArgument='<%#Eval("Code") %>'
    CommandName="DisplayAll"
    Text="Display All"
     Font-Size="Small"
    Font-Bold="True" />
     </td>
     <td style="visibility:hidden"></td>
     <td style="text-align:left; font-weight:bold;"><asp:Button ID="btnPrintQuality" runat="server" Text="" CssClass="ButtonsLink" /></td> </tr>
    <tr>
     <th style="border:solid 1px;">JID</th>
     <th style="border:solid 1px; border-left:none;"> CODE</th>
    <th style="border:solid 1px; border-left:none;"> ACTIVE</th>
    <th style="border:solid 1px; border-left:none;"> STATUS</th>
     </tr> </HeaderTemplate> <ItemTemplate> <tr id="trDetail">
     <td style="border:solid 1px; border-top:none;">
     <asp:Button ID="btnDettt" runat="server"
    CommandArgument='<%#Eval("Code")%>
    CssClass="ButtonsLink"
    Text='<%#DataBinder.Eval(Container.DataItem, "JID") %>' Font-Size="Small" />
     </td>
    <td style="border-bottom:solid 1px; border-right:solid 1px;">
     <asp:Label ID="lbCode" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Code") %>' Font-Size="Small" />
     </td>
    <td style="border-bottom:solid 1px; border-right:solid 1px;">
    <asp:Label ID="lbActive" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Active") %>' Font-Size="Small" />
     </td>
    <td style="border-bottom:solid 1px; border-right:solid 1px;">
     <asp:Label ID="lbStatus" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Status") %>' Font-Size="Small" />
     </td>                                    
    </tr> </ItemTemplate> <FooterTemplate></table></FooterTemplate>
     </asp:Repeater>
    </div>

    </ContentTemplate>

    </telerik:RadWindow>        ​

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 29 Apr 2015 Link to this post

    Hi John,

    This code would not compile because an apostrophe is missing on the button declaration:

    <asp:Button ID="btnDettt" runat="server"
                CommandArgument='<%#Eval("Code")%>'
                CssClass="ButtonsLink"
                Text='<%#DataBinder.Eval(Container.DataItem, "JID") %>' Font-Size="Small" />
     

    That aside, there should be no difference between the code in a RadWindow and out of it. Can you confirm that the repeater renders as expected outside of a RadWindow?

    On my end it does in both cases, which leads me to believe the issue lies with the page itself. Here are some ideas that can be helpful:

    • make sure the page has a valid doctype. Xhtml 1.0 Transitional is one of the most forgiving and easiest to satisfy
    • make sure the page HTML is valid
    • make sure that no CSS is interfering with the repeater
    • try with different data, if the original data contains some (invalid) HTML, it could break the repeater. Judging from the screenshot, the second record's Code field may be causing the problem
    • try upgrading to the latest Telerik controls version to see if this helps. The version you have is quite old and does not support modern browsers

    Regards,

    Marin Bratanov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    7 posts
    Member since:
    Mar 2013

    Posted 29 Apr 2015 in reply to Marin Bratanov Link to this post

    Marin, thanks for your reply. Please see my answers below:

    Can you confirm that the repeater renders as expected outside of a RadWindow?

     >>>Yes, the repeater renders normally outside of a RadWindow.

    make sure the page has a valid doctype. Xhtml 1.0 Transitional is one of the most forgiving and easiest to satisfy. make sure the page HTML is valid.

    >>>I tried <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and <!DOCTYPE html>, but got the same results

     

    make sure that no CSS is interfering with the repeater

     >>>no CSS interference

    try with different data, if the original data contains some (invalid) HTML, it could break the repeater. Judging from the screenshot, the second record's Code field may be causing the problemtry

    >>>I tried just put simple characters such ABC on each column, but still got the same results. The rows which have shifted columns are random. Sometimes it's row 3, sometiems it's row 9. There are not just one row with the issue.  

     upgrading to the latest Telerik controls version to see if this helps. The version you have is quite old and does not support modern browsers

    >>>I installed the latest version 2015.1.401.35 but still got the same issue 

     

  5. John
    John avatar
    7 posts
    Member since:
    Mar 2013

    Posted 29 Apr 2015 in reply to John Link to this post

    I am sorry for the wrong information and confusion. I tested with repeater inside div only, and it had the same issue. So it's not caused by RadWindow.
  6. John
    John avatar
    7 posts
    Member since:
    Mar 2013

    Posted 29 Apr 2015 Link to this post

    It seems the issue was caused by the following codes:

                 <telerik:AjaxSetting AjaxControlID="repD">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="repDetail" />
                    </UpdatedControls>
                </telerik:AjaxSetting>   

    How can we solve this problem? If i don't include the above codes, the data will not show up in the repeater repDetail

     

     

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 30 Apr 2015 Link to this post

    Hi John,

    Adding that AJAX setting should only wrap the repeater in a div element, as this is how RadAjax renders its UpdatePanels by default. Thus, it should not result in such a behavior change.

    I tried the code again with AJAX settings in the picture and I am attaching the test case I build here as a reference, so you can compare it with yours.

    In the meantime, I can suggest trying an asp:UpdatePanel instead to see if it makes a difference. You can use its AsyncTriggers collection to add the external control, or its Update() server method in case its UpdateMode==Conditional.

    Regards,

    Marin Bratanov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. John
    John avatar
    7 posts
    Member since:
    Mar 2013

    Posted 30 Apr 2015 Link to this post

    hi Marin, can you post a sample code for using the asp:UpdatePanel with RadWindow, repeater? In another word, where should i put the asp:UpdatePanel in the codes of the first post. Also, when we use AjaxSettings, if the number of reocrds is small, it's fine. But if the number of records is big, for example, 200, the columns on some rows will shift

     

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 May 2015 Link to this post

    Hello John,

    The following article treats using a RadWindow with AJAX: http://www.telerik.com/help/aspnet-ajax/window-ajaxifying.html.

    Here is a basic example of how to use it, based on my previous sample. It does the same thing, but with asp:UpdatePanel instead of RadAjax:

    <asp:Button ID="repD" Text="repD" OnClick="repD_Click" runat="server" />
    <telerik:RadWindow ID="rwinDetail" runat="server" RestrictionZoneID="ContentTemplateZone" Modal="false" Width="450" Height="300" Behaviors="Close,Move,Resize,Minimize" Visible="True">
        <ContentTemplate>
            <asp:UpdatePanel ID="Updatepanel1" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="repD" />
                </Triggers>
                <ContentTemplate>
                    <div style="font-size:small;" id="Div1">
                        <asp:Repeater ID="repDetail" runat="server">
                            . . . .
                        </asp:Repeater>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
    </telerik:RadWindow> ​


    Regards,

    Marin Bratanov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017