CoverFlowMode Radrotator paging

2 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    2 posts
    Member since:
    Sep 2011

    Posted 28 Nov 2011 Link to this post

    I have implemented CoverFlowMode using Radrotator, as there are huge records I am implemeting paging manually using RadAjaxManager Ajax Request on button click.

    But the RadRotator is not getting updated with next records using RadAjaxManager. How can I update Radrotator CoverFlowMode with RadAjaxManager.

    Below is the code
    aspx file code

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript">

    function ClientClicked() {

    $find(

    <%= rmStudentList.ClientID %>").ajaxRequest("NEXT");
    return false;

    }
    </script>
    < /telerik
    :RadCodeBlock >

    <div class="mainDiv">
    <asp:Panel ID="RotatorWrapper" runat="server" CssClass="rotWrapper">

    <telerik:RadRotator ID="RadRotator1" runat="server" Width="748px" ItemWidth="150"

    ScrollDirection="Left, Right" Height="233px" ItemHeight="113" ScrollDuration="500"

    FrameDuration="2000" PauseOnMouseOver="false" RotatorType="CoverFlow" InitialItemIndex="4"

    OnClientItemShown="OnClientItemShown" OnClientItemClicked="OnClientItemClicked"

    CssClass="RemoveRotatorBorder">
    <ItemTemplate>

    <asp:Image ID="Image1" runat="server" ImageUrl='<%# GetImagePath(Eval("ImagePath")) %>'

    AlternateText='<%# Eval("LastName") %>' />

    </ItemTemplate>

    </telerik:RadRotator>

    <input id="Button1" type="button" runat="server" value="Next" onclick="ClientClicked(); return false;" />

    </asp:Panel>

    </div>

    cs file

    protected void rmStudentList_AjaxRequest(object sender, AjaxRequestEventArgs e)

    {

    ConfigureRadRotator(RotatorType.CoverFlowButtons);

    }

  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 30 Nov 2011 Link to this post

    Hello Neeraj,

    Please check the support ticket on the same problem, in which I have provided a solution to the problem at hand. For your convenience I will post the answer here as well:

    Overall, your approach for updating the RadRotator seems to be correct - you are rebinding it with new data of every Ajax request. Please check if the data that is loaded in the RadRotator after the Ajax request isn't the same as before.

    Also, when Ajaxifying a rotator control in CoverFlow mode, you should register the animation options script on every request to the server in order to preserve the CoverFlow animation effects:
    protected void rmStudentList_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        ViewState["PageIndex"] = "4";
        ConfigureRadRotator(RotatorType.CoverFlowButtons);
        string script = "Telerik.Web.UI.RadRotatorAnimation.set_scrollAnimationOptions('" + RadRotator1.ClientID + "', {minScale: 0.8, yO: 60, xR: -30, xItemSpacing: 50, matrix: { m11: 1, m12: 0, m21: -0.1, m22: 1 }, reflectionHeight: 0.5, reflectionOpacity: 1 });";
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "setupAnimation", script, true);
    }

    I have prepared a sample project that uses your code in order to implement the core functionality that you want to achieve. Please use it as a reference for incorporating this feature into your actual project.

    For future use of our support system I would suggest sending a separate ticket for every problem that you want to report. This will ease our correspondence and we'll be able to provide a working solution much faster if there is only one ticket to follow. That being said, let's continue our discussion in your support ticket on the matter.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top