Rotator control not fully refreshing when ajaxified.

[Fred]

I have a user control on a page which is a RadRotator control.  The page is ajaxified.  There is a combobox which causes the usercontrol to refresh.

With Ajax disabled, it works great.

With Ajax enabled, when the usercontrol updates itself, it is fine.  When the combobox updates the usercontrol, all of the items in the usercontrol are listed vertically. 

Page:

RadAjaxManager1.AjaxSettings.AddAjaxSetting(clientcbo, this.QuickReportsFormDiv, null, UpdatePanelRenderMode.Inline);

 

UserControl:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    </telerik:RadAjaxManagerProxy>

<telerik:RadScriptBlock ID="RadScriptBlockqrtr" runat="server">
    <script type="text/javascript">

        function ShowError(sender, args) {
            alert('Quick Report Request Failed with unknown error.');
        }
    </script>
</telerik:RadScriptBlock>

<asp:Panel id="QuickReportsFormDiv" runat="server" style="min-height: 66px; margin-bottom: 5px; white-space: normal!important">
                    
        <telerik:RadRotator ID="QuickReportsRadRotator" runat="server" 
            RenderMode="Lightweight" Height="100px" Width="100%"
            RotatorType="Buttons" EnableDragScrolling="false" WrapFrames="false" 
            ScrollDirection="Left,Right" ScrollDuration="1" 
            AppendDataBoundItems="false"
            OnItemClick="QuickReportsRadRotator_ItemClick"
           >
            
            <ItemTemplate>
                
                    <telerik:RadBinaryImage ID="QuickReportsControl" runat="server"
                        CssClass="QRThumbnails"
                        AlternateText='<%# Eval("FileUploadID") %>'  ToolTip='<%# Eval("FileTitle") %>' 
                        DataValue='<%# Eval("ThumbnailBinaryData") %>'
                        />
            </ItemTemplate>
        </telerik:RadRotator>                 

    </asp:Panel>

 

[John]

I work with Fred and have another bit of info regarding the above post.

The HTML built by the RadRotator does not have the correct width on the <ul element.   When it isn't working it generates a small width like 76px below causing items to wrap one below each other showing the first item but all others are stacked under it, all but the first is not displayed:

<ul class="rrItemsList" style="width: 76px; height: 103px; position: relative; left: 0px; top: 0px;">

 

When it works it creates one with a width of 726px:

<div id="ctl00_cphBody_QuickReportsForm_QuickReportsRadRotator" class="RadRotator RadRotator_Web20" style="height: 100px; width: 100%; visibility: visible;">
<!-- 2016.1.113.45 --><div class="rrRelativeWrapper" style="height: 102px; width: auto;">
<div class="rrClipRegion" style="margin-left: 20px; margin-right: 20px; overflow: hidden; width: auto; height: 100px; position: relative;">
<ul class="rrItemsList" style="width: 726px; height: 103px; position: relative; left: 0px; top: 0px;">
<li class="rrItem"><div id="ctl00_cphBody_QuickReportsForm_QuickReportsRadRotator_i0">

                
                    <img id="ctl00_cphBody_QuickReportsForm_QuickReportsRadRotator_i0_QuickReportsControl" title="Cite Analysis" class="QRThumbnails" src="../Telerik.Web.UI.WebResource.axd?imgid=c595e4bbe6df42cca17f161175194f71&amp;type=rbi" alt="46" style="height:212px;width:275px;">
            
</div></li><li class="rrItem"><div id="ctl00_cphBody_QuickReportsForm_QuickReportsRadRotator_i1">

We tried repainting RadRotator in JavaScript, changing Ajax and Ajax Proxy settings, changing RadRotator parameters, forcing a refresh of RadRotator in code behind, changing widths, placing in additional div tags with various column settings, and several other things but haven't found the answer yet.

Regards,

John

[Stamo Gochev]

Hi,

Regarding Fred's question - I tried to reproduce the described issue using the provided code, but the snippet isn't detailed enough (e.g. the RadComboBox definition is missing), so can you isolate the problem in a separate web page and send it back to me?

The runnable example will allow me to investigate the scenario and give you additional suggestions on the matter. As AJAX functionality is involved, the concrete configuration is important for resolving the case.

As for John's question - can you send us a separate support ticket about the issue with the width of RadRotator as the two problems seem to be very different? This will allow our support team to handle them independently and more efficiently, so you will probably receive quicker answers.

It will be very helpful, if you provide more information on the following things in the new ticket:

• Can you reproduce the problem on any of our demos using the Web20 skin?
• Does the problem occur in Web20 skin only or the same can be observed with other skins as well?
• Which browsers and browser versions are you testing with?

In addition, you can attach the same page that Fred will isolate for the above issue in the new ticket, as the rotator's dimensions might get changed after an AJAX call and we will need to further investigate this.

Regards,
Stamo Gochev
Telerik