RadRotator loses animation effect after post back.

[Denisas]

Hello,

I use trial version of Web UI Controls & Components for ASP.NET AJAX. I’ve faced a problem with RadRotator animation. I use it in Web User Control. Here is the code for my control FabricItunes.ascx :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FabricItunes.ascx.cs" Inherits="test.Controls.FabricItunes" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<style type="text/css">

    .rotWrapper

    {

        margin-left: auto;

        margin-right: auto;

        height: 260px;

        font-family: Arial;

        padding: 190px 0 0;

        width: 750px;

        background: #fff url("travel_back.jpg") no-repeat 0 0;

        font: 14px 'Segoe UI' , Arial, Sans-serif;

        color: #000;

    }       

    .RemoveRotatorBorder div.rrClipRegion

    {

        /* The following style removes the border of the rotator that is applied to the items wrapper DIV of the control by default, in case the control renders buttons.

        In case you want to removed this border, you can safely use this CSS selector. */

        border: 0px none;

    }

</style>

 

<telerik:RadRotator ID="RadRotator1"

                    runat="server"

                    Width="575px"

                    ItemWidth="140px"

                    Height="130px"

                    ItemHeight="86px"

                    FrameDuration="100000"

                    PauseOnMouseOver="False"

                    RotatorType="CoverFlow"                    

                    CssClass="RemoveRotatorBorder"

                    Skin="Web20"

                    WrapFrames="False"                    

                    onitemclick="RadRotator1_ItemClick">

    <ItemTemplate>

        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />

        <asp:Label ID="Label1" runat="server" Text="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()).Substring(0, 3) %>"></asp:Label>

    </ItemTemplate>

</telerik:RadRotator>

 

<script type="text/javascript">

    //<![CDATA[

    // The set_scrollAnimationOptions method takes two arguments - the first one is the ClientID of the rotator, which we want to configure and the second one is

    // a hash table with the options we want to apply.

    Telerik.Web.UI.RadRotatorAnimation.set_scrollAnimationOptions("<%= RadRotator1.ClientID %>", // The ClientID of the RadRotator

                    {

                    minScale: 0.8, // The size scale [0; 1], applied to the items that are not selected.

                    yO: 60, // The offset in pixels of the center of the selected item from the top edge of the rotator.

                    xR: -30, // The offset in pixels between the selected items and the first item on the left and on the right of the selected item.

                    xItemSpacing: 50, // The offset in pixels between the items in the rotator.

                    matrix: { m11: 1, m12: 0, m21: -0.1, m22: 1 }, // The 2d transformation matrix, applied to the items that appear on the right of the selected item.

                    reflectionHeight: 0.5, // The height of the reflection

                    reflectionOpacity: 1 // The opacity, applied to the reflection

                }

                );  // end of animationOptions

     //]]>

</script>


The code behid is:

namespace test.Controls
{

    public class FabricChoosedEventArgs : EventArgs
    {
        private string _FabricCode;
        public string FabricCode
        {
            get { return _FabricCode; }
            set { _FabricCode = value; }
        }
    }

    public partial class FabricItunes : System.Web.UI.UserControl
    {
        public delegate void FabricChoosedEventHandler(object sender, FabricChoosedEventArgs e);

        public event FabricChoosedEventHandler OnFabricChoosed;

        string virtualPath = "~/Images/Fabrics/";


        private void Page_Load(object sender, System.EventArgs e)
        {
            if (!IsPostBack)
            {
                FabricColorID = 0;
                ConfigureRadRotator(FabricColorID);            }
        }

        public void ConfigureRadRotator(int FabricColorID)
        {
            RadRotator1.RotatorType = RotatorType.CoverFlow;
            RadRotator1.DataSource = GetFilesInFolder(virtualPath, FabricColorID);
            RadRotator1.InitialItemIndex = 0;
            RadRotator1.DataBind();
        }

        protected List<string> GetFilesInFolder(string folderVirtualPath, int FabricColorID)
        {
            testws ws = new testws();
            List<string> FL = new List<string>();
            FL = ws.FabricsByColor(FabricColorID).ToList();
            List<string> virtualPathsCollection = new List<string>();
            foreach (String path in FL)
            {
                string virtualPath = VirtualPathUtility.AppendTrailingSlash(folderVirtualPath) + System.IO.Path.GetFileName(path) + "_th.jpg";
                virtualPathsCollection.Add(virtualPath);
            }
            return virtualPathsCollection;
        }

        protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
        {
            Label lbl = e.Item.FindControl("Label1") as Label;
                if (this.OnFabricChoosed != null)
                {
                    FabricChoosedEventArgs r = new FabricChoosedEventArgs();
                    r.FabricCode = lbl.Text;
                    this.OnFabricChoosed(this, r);
                }
        }
    }
}

Now when I place this web user control on Web Form Using Master Page it loads perfectly with needed animation effects firs time. But when I click a rotator item it causes page post back and rotator loses all its animation effects.

Here is the code for Web Form:

<%@ Page Title="" Language="C#" MasterPageFile="~/Shop.Master" AutoEventWireup="true" CodeBehind="Shop.aspx.cs" Inherits="test.Shop" %>
<%@ Register src="Controls/BuyItem.ascx" tagname="BuyItem" tagprefix="uc1" %>
<%@ Register src="Controls/FabricItunes.ascx" tagname="FabricItunes" tagprefix="uc2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_MainArea" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <uc3:BuyItem ID="BuyItem1" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<div id="pnlProductItunes">
    <asp:UpdatePanel runat="server" UpdateMode="Always">
    <ContentTemplate>
        <div style="height: 155px; margin-top: 35px;">
            <uc2:FabricItunes ID="FabricItunes" runat="server" />
        </div>
    </ContentTemplate>
    </asp:UpdatePanel>
</div>
</asp:Content>

The code behid is:

namespace test
{
    public partial class Shop : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            this.FabricColors.OnFabricColorChoosed += new test.Controls.FabricColors.FabricColorChoosedEventHandler(FabricColors_OnFabricColorChoosed);
            this.FabricItunes.OnFabricChoosed += new test.Controls.FabricItunes.FabricChoosedEventHandler(FabricItunes_OnFabricChoosed);
        }

        void FabricItunes_OnFabricChoosed(object sender, Controls.FabricChoosedEventArgs e)
        {
            this.BuyItem1.showFabricImage(e.FabricCode);
        }
   }
}

Please advise how to avoid this animation loosing.
Thanks in advance for any suggestion.

[Niko]

Hi Denisas,

  In order to avoid the postback, i.e. loosing the transition animation, you should remove the capturing of the OnItemClick server event and rely on the client-side event OnClientItemClicked. For more information, please, refer to the following demo. The drawback is that all your logic should be reimplemented on the client using JavaScript. Still this is the only option of keep the animation going.

Hope this helps.

All the best,
Niko
the Telerik team

[Denisas]

Does it mean, that I can not use radRotator in web user control with custom events ?

[Niko]

Hello Denisas,

The rotator can be used within web controls and its events can be used from there. Avoiding the postback has nothing to do with where the rotator has been defined, but rather with the setup of the rotator itself. If you don't want to have a postback, but you still need to capture the clicking on a rotator item, then your best option in to use the client-side OnClientItemClicked event. Otherwise you will end up with a postback and the animation of the control will not occur. Please, review the provided demo from my previous post for more information on the matter.

Hope this helps.

Best wishes,
Niko
the Telerik team

[Denisas]

Ok, I've understood it. Thank you for your answer. But here is another problem.
I just placed radrotator on web form and tried to use your webservice as datasource.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .positionCenter
        {
            margin: 8px auto;
        }
    </style>
    <script type="text/javascript">
        function OnClientItemsRequested(sender, args) {
            alert('p');
        }

        function pageLoad() {
            clearLog();
        }

        function suppressErrorAlert(rotator, args) {
            args.set_cancelErrorAlert(true);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div>
        <telerik:RadRotator ID="RadRotator1" runat="server" Width="580px" Height="130px"
                ItemHeight="135px" ItemWidth="110px" CssClass="positionCenter"
                OnClientItemsRequested="OnClientItemsRequested">
        <WebServiceSettings Path="http://demos.telerik.com/aspnet-ajax/rotator/examples/loadondemand/RotatorWebService.asmx" Method="GetRotatorData"/>
        </telerik:RadRotator>
    </div>
    </form>
</body>
</html>

But I always get an error:

RadRotator items request failed :
Exception=The server method 'GetRotatorData' failed.

I tried to make the same service and place it in the rood af my web app, but it didn't help neither. What am I doing wrong?

Thank you in advance.

[Svetlina Anati]

Hi Denisas,

The problem you face comes from the different domains. This is an inherent limitation of the XmlHttpRequest object that is used to query the web service. There are workarounds like JSONP that allow for cross-domain calls, but it will require extensive modifications to both the web service and the client-side code. Here's an example:

http://www.codeproject.com/KB/webservices/ASPNET_JSONP.aspx

Another alternative is to use server-side proxy service to redirect the request to the actual web service:

http://msdn.microsoft.com/en-us/library/ms155134.aspx

You are the first one who asks about this and thus I will log it in our TODO list for future consideration. Note, however, that you do not promise that this will be implemented because such a decision depends on other customers' requests, current tasks and priorities, etc.


Best wishes,
Svetlina
the Telerik team

[Denisas]

Thank you for answer.
Also please advice how could I make the following:
I need a web user control with radRotator and animation, i need another web user control which will pass parameters for data source for rotator. For example one control contains artists names, ant control with rotator should display all albums of the choosed artist.
How can change rotator data source and rebind it without any postbacks (in order not to loose animation effects) ?
I did not find any solution in provided demos on your web site.

[Niko]

Hello Denisas,

The only way to supply new items to the RadRotator control is through the use of a web service.
In your case you could also rebind the albums rotator through Ajax, thus refreshing the content of this control only. Please, find attached a sample implementation of updating one rotator from another through the use of an RadAjaxManager control.

  Hope this helps. Please, let me know if you still encounter any difficulties.

Greetings,
Niko
the Telerik team