Rotator not loading forced changes

[Lynn]

I have a web page that contains three (3) rotators.  I am manually syncing the movement of the rotators 1 and 2, and have rotator 3 on a different schedule.

I also have 4 small graphical images below the main photo area where the user can select the desired photo by clicking on the desired "dot" and then the scrolling will continue again after that "manual set".

All of this is working well when rotators 1 and 2 are driven from the same XMLDataSource.  However, when rotators 1 and 2 are driven from a SqlDataSource, then the "manual set" is not working correctly.  In this instance (when using a SqlDataSource), let's say that rotators 1/2 are on the third position (index = 2) and the user clicks on the first "dot" to select index 0.  Rotator 2 will immediately show the correct text, but Rotator 1 will show empty white space UNTIL the next time for the rotators to auto rotate. Once the auto rotate begins again, everything works fine until the user clicks on a different "dot".  Then the main rotator 1 shows white space again until the next auto.

Again, this ONLY happens when a SqlDataSource is used.  When an XMLDataSource is used, the "manual set" works perfectly (as does the rest of the process).

I have attached two screen captures -- #1 is normal, #2 shows the white space.

I have also included the entire .aspx source code below.  Please note that the code below includes the XMLDataSource for rotator #1 and the SqlDataSource for rotator #2.  This combination also works exactly correct.

Thanks in advance for any help you can give me.

Lynn

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="THDiRotator.ascx.cs" Inherits="THDiRotator" %>
    <link href="THDiRotatorStyles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function OnClientItemShowing(sender, eventArgs) {
            var maxslides = 3;
            var testslides = maxslides - 1;
            var idx = eventArgs.get_item().get_index();
            if (idx > testslides) {
                idx = 0;
            }
            else {
                idx = idx + 1;
            }
            var oRotator = $find("<%= rotator2.ClientID %>");
            if (oRotator) oRotator.set_currentItemIndex(idx);
            selectImg(idx);
        }

        function selectPhoto(idx) {
            var aRotator = $find("<%= rotator1.ClientID %>");
            aRotator.set_currentItemIndex(idx);

            //var bRotator = $find("<%= rotator2.ClientID %>");
            //bRotator.set_currentItemIndex(idx);

            selectImg(idx);
        }

        function selectImg(idx) {
            var img0 = document.getElementById('<%=Image0.ClientID%>');
            var img1 = document.getElementById('<%=Image1.ClientID%>');
            var img2 = document.getElementById('<%=Image2.ClientID%>');
            var img3 = document.getElementById('<%=Image3.ClientID%>');
            if (idx == 0) {
                img0.src = 'selected.png';
            }
            else {
                img0.src = 'unselected.png';
            }
            if (idx == 1) {
                img1.src = 'selected.png';
            }
            else {
                img1.src = 'unselected.png';
            }
            if (idx == 2) {
                img2.src = 'selected.png';
            }
            else {
                img2.src = 'unselected.png';
            }
            if (idx == 3) {
                img3.src = 'selected.png';
            }
            else {
                img3.src = 'unselected.png';
            }
        }
    </script>
    <style type="text/css">
    .seld
    {
     background-image: selected.png;
    }
    .unseld
    {
     background-image: unselected.png;
    }
    </style>
<div>
<!--==============================    start of photo slide show    =================================-->
<div style="position: absolute; margin-left: 20px; margin-top: 20px; height: 398px; width: 955px; border: 1px solid #c0c0c0; background-color: #ffffff; box-shadow: rgb(100,100,100) 5px 5px 5px;" >
    <!--==============================    large photos    =================================-->
    <telerik:RadRotator runat="server" DataSourceID="xmlDataSource1" ID="rotator1" style="z-index: 3; position: relative; left: 15px; top: 15px; "
        ScrollDirection="Left" SlideShowAnimation-Type="CrossFade" SlideShowAnimation-Duration="2000" RotatorType="SlideShow" OnClientItemShowing="OnClientItemShowing"
        FrameDuration="6000" Width="955px" ItemWidth="955px" Height="398px" ItemHeight="398px">
        <ItemTemplate>
            <div class="itemTemplate">
                <img src="<%# XPath("Image") %>" alt="<%# XPath("Title") %>" style="border: 0px;" />
            </div>
        </ItemTemplate>
    </telerik:RadRotator>
    <!--==============================    small text rotator in lower left portion    =================================-->
    <div class="xscrollContainer" style="z-index: 5; ">
        <telerik:RadRotator runat="server" DataSourceID="SqlDataSource3" ID="rotator2" ScrollDirection="Left"
            SlideShowAnimation-Type="Fade" RotatorType="FromCode"
            FrameDuration="0" Width="650px" ItemWidth="650px" Height="30px" ItemHeight="30px">
            <ItemTemplate>
                <div class="itemTemplate">
                    <%# Eval("SelectedField")%>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    </div>
    <!--==============================    large text rotator in right center    =================================-->
    <div class="xtestimonialText">
        <telerik:RadRotator ID="rotator3" runat="server" DataSourceID="SqlDataSource4" SlideShowAnimation-Type="Fade"
            ScrollDuration="10000" FrameDuration="10000" RotatorType="SlideShow" ScrollDirection="Left" Height="200px"
            EnableEmbeddedSkins="false" Width="210px" >
            <ItemTemplate>
                <div style="width: 210px; height: 200px; vertical-align: middle; ">
                    <%# Eval("SelectedField")%>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    </div>
    <br />
    <div style="width: 955px; text-align: center;">
        <asp:HyperLink ID="HyperLink1" runat="server" onclick="selectPhoto(0);return false;" ><asp:Image ID="Image0" ImageUrl="selected.png" runat="server" /></asp:HyperLink>
        <asp:HyperLink ID="HyperLink2" runat="server" onclick="selectPhoto(1);return false;" ><asp:Image ID="Image1" ImageUrl="unselected.png" runat="server" /></asp:HyperLink>
        <asp:HyperLink ID="HyperLink3" runat="server" onclick="selectPhoto(2);return false;" ><asp:Image ID="Image2" ImageUrl="unselected.png" runat="server" /></asp:HyperLink>
        <asp:HyperLink ID="HyperLink4" runat="server" onclick="selectPhoto(3);return false;" ><asp:Image ID="Image3" ImageUrl="unselected.png" runat="server" /></asp:HyperLink>
    </div>
</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"></asp:SqlDataSource>

<asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="photos.xml"></asp:XmlDataSource>

<asp:SqlDataSource ID="SqlDataSource3" runat="server"
        ConnectionString="<%$ ConnectionStrings:HomesOnlineNetwork100ConnectionString %>"
        SelectCommand="Scroller_SmallText" SelectCommandType="StoredProcedure" OnSelecting="SqlDataSource3_Selecting">
    <SelectParameters>
        <asp:Parameter DefaultValue="TextSortLang001" Name="FieldName" Type="String" />
        <asp:Parameter DefaultValue="Scroller" Name="Type" Type="String" />
        <asp:Parameter DefaultValue="HPPhotos" Name="ClassName" Type="String" />
    </SelectParameters>
    </asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource4" runat="server"
        ConnectionString="<%$ ConnectionStrings:HomesOnlineNetwork100ConnectionString %>"
        SelectCommand="Scroller_SmallText" SelectCommandType="StoredProcedure" OnSelecting="SqlDataSource4_Selecting">
    <SelectParameters>
        <asp:Parameter DefaultValue="TextSortLang001" Name="FieldName" Type="String" />
        <asp:Parameter DefaultValue="Scroller" Name="Type" Type="String" />
        <asp:Parameter DefaultValue="HPLargeTextScroller" Name="ClassName" Type="String" />
    </SelectParameters>
    </asp:SqlDataSource>

<!--==============================    end of photo slide show    =================================-->
</div>

[Slav]

Hello Lynn,

The encountered behavior may occur when the RotatorType property is set to SlideShow, with CrossFade animation, and the client method set_currentItemIndex is used to set the current item. This issue is already logged and will be addressed by our developers, although I cannot provide a firm estimate when a fix will be available.

For the time being I would suggest changing the RotatorType of your RadRotator to Fade, which will remove the problem. Please excuse us for the temporal inconvenience.

Also I noticed that you have used several RadRotators to implement the functionality of a single one. Keep in mind that you can use the control's inner property ItemTemplate in order to construct the same layout that you have currently achieved, if using multiple datasources is not a requirement in your case.

Don't hesitate to contact us again if you encounter additional problems.

Regards,
Slav
the Telerik team