Coverflow and IE9

16 posts, 0 answers
  1. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 08 Apr 2011 Link to this post

    Just wondering if there is a fix for Coverflow for the Rotator in IE9.
    It was working fine in my website before in IE8 and Firefox, but now with IE9 it stuffs up as in attached images.

    Ideas?  I've got the latest release of Telerik tools.

    The demo site for the Rotator appears fine within IE9 too.

    code below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestRotator.aspx.cs" Inherits="TestRotator" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadRotator ID="RadRotator1" runat="server" RotatorType="Coverflow" Width="500px"
                OnClientItemShown="" Skin="Vista">
                <ItemTemplate>
                    <asp:Image ID="Image1" runat="server" Height="100px" Width="200px" ImageUrl='<%# Container.DataItem %>'
                        AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>"
                        BorderStyle="Solid" BorderWidth="4px" BorderColor="Black" />
                </ItemTemplate>
            </telerik:RadRotator>
        </div>
        </form>
    </body>
    </html>

    protected void Page_Load(object sender, EventArgs e)
        {
            RadRotator1.RotatorType = Telerik.Web.UI.RotatorType.CoverFlow;
            RadRotator1.DataSource = GetFilesInFolder("~/Images/HomeRotator");
            RadRotator1.DataBind();
        }
      
        protected List<string> GetFilesInFolder(string folderVirtualPath)
        {
            string physicalPathToFolder = Server.MapPath(folderVirtualPath);// Get the physical path
            string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);// Get all child files of the given folder
            List<string> virtualPathsCollection = new List<string>();// Contains the result
      
            foreach (String path in physicalPathsCollection)
            {
                // The value of virtualPath will be similar to '~/PathToFolder/Image1.jpg
                string virtualPath = VirtualPathUtility.AppendTrailingSlash(folderVirtualPath) + System.IO.Path.GetFileName(path);
                virtualPathsCollection.Add(virtualPath);
            }
            return virtualPathsCollection;
        }
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 08 Apr 2011 Link to this post

    Hi Jordan,

    Please, make sure that you have set the ItemWidth/ItemHeight properties to the corresponding dimension values of the images - in your case 200/100. Also make sure that you have set the Height of the rotator as well, again it could be 100.

    Hope this helps.

    Greetings,
    Niko
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 10 Apr 2011 Link to this post

    Thanks for that.  Not sure why this was different in IE8 but it is now back operational.  However, I still have an issue trying to replicate your Coverflow example with the reflections.  It seems taking a direct copy of the code from the example will do the transformation and everything but the reflection effect won't work.  Is the javascript still accurate?  Again, it was working in IE8...
  5. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 10 Apr 2011 Link to this post

    Again it works fine in Firefox, just not IE9.  Is there another setting i am missing?  I have set up a test page copying exactly what's in the code part of the demo page for coverflow and still having the same issue.
  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 11 Apr 2011 Link to this post

    Hello Jordan,

    Please, make sure that you have updated the animation settings of the rotator, more precisely the reflection settings for the items. Here is the key element from the demo that you may be missing:
    <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("<%= exampleRotator.ClientID %>",
            {
                reflectionHeight: 0.5, // The height of the reflection
                reflectionOpacity: 1 // The opacity, applied to the reflection
            }
        );
        //]]>
    </script>

    This script element should be placed right after the declaration of the rotator. In the demo for the CoverFlow you will find a more complex definition for the settings, where event a 2D transformation matrix is used to skew the items a little.

    Please, find a simple test page with a rotator implementing the reflections for the items. I have tested it under IE9 and it works as expected.

    Regards,
    Niko
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 11 Apr 2011 Link to this post

    Same issue with your files.  As i stated, the construct i have used comes directly from the examples file.  I have attached the images again of your attached form rendered in IE9 and Firefox.
  8. Niko
    Admin
    Niko avatar
    387 posts

    Posted 12 Apr 2011 Link to this post

    Hello Jordan,

    Please, review the following video, capturing the execution of the RadRotator with the reflection under IE9 on my side - http://screencast.com/t/Kvi0YiVlrY. The reflection is visible and the rotator appears to be working just fine. Please, make sure that you are using the official version of the IE9 browser and that there are no meta tags for emulating the older browser engines - IE8 or IE7.

    Kind regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  9. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 12 Apr 2011 Link to this post

    I am using the official and fully update IE9 and there are no meta tags present. I am using a Website not a Web application if that makes a difference. It is strange that I run the form you sent me exactly as it was attached and get a different rendering output.
  10. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 13 Apr 2011 Link to this post

    just to recount what i have tried to get this working:
    • Began a completely new Telerik project.
    • Used the supplied files using that latest release of the Telerik controls (2011.1.315.40)
    • Selected supplied aspx as start page, compiled and ran the project
    • RESULT: no reflection for IE9, but works in Firefox

    I've also ensured:

    • IE9 is the latest version fully up to date
    • Windows 7 is fully updated

    I have also tried:

    • downgrading the Telerik controls to the 2010.3 last release to no avail

    I am not sure how to progress this to a result.  Is there different settings in IE9 that would block the transformation (although the transformation matrix does work when used, just not the reflection).

  11. Niko
    Admin
    Niko avatar
    387 posts

    Posted 14 Apr 2011 Link to this post

    Hello Jordan,

    This is indeed a peculiar case. It turns out that using one and the same setup we both get different results. We will need to drill down the problem together. I should apologize if this turns out to be too much time and effort consuming.
    Please, find attached a sample project that you just extract and run. Please, try running it on your end and let me know of the outcome. Thus, using one and the same project we can eliminate some of the possible causes for the problem.
    Secondly, because the RadRotator uses <canvas> to draw the reflections, it may be an issue related to its 2d context. Could you, please, check, using the Developer Tools, if within the <li> item tag there is a generated <canvas> tag. If there is, then you may need to do some tests on the capabilities of the canvas under IE9. Here is a site you may utilize for the purpose - http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=rotate, or http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=rotate, or http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=shadows.
    Finally, if the tests above all work out OK, I suggest you open a support ticket and attach the project you are working with, so that I can investigate it and drill down the issue.

    Hope I was able to give you enough directions to investigate the problem.

    Best wishes,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 14 Apr 2011 Link to this post

    the attached file does not contain a project file.

    I have also investigated the Canvas issue and in IE9 it does not contain the canvas at all.  Firefox obviously does (as attached).
  13. Niko
    Admin
    Niko avatar
    387 posts

    Posted 15 Apr 2011 Link to this post

    Hello Jordan,

    Please, open the attached project as a web site. I apologize if I have misled you.

    Please, let me know of the outcome. I will further test on my side what may cause the canvas to not appear in the DOM tree.

    Greetings,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  14. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 17 Apr 2011 Link to this post

    The outcome is the same if it is opened as a website, included in a project as a website or converted to a web application.
  15. Niko
    Admin
    Niko avatar
    387 posts

    Posted 18 Apr 2011 Link to this post

    Hello Jordan,

    Please, try the new version of the website. There are some modifications made to the RadRotator lazy loading of images. Please, let me know of the outcome.

    Greetings,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  16. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 19 Apr 2011 Link to this post

    Still no luck on the attached files.  I have made some progress though... kind of....

    the reflection started working in IE9 via my original website.  I am not sure what made it work, however, i have just found out what made it stop working:
    When i added extra image files to the directory that i was binding to for the images, the reflection suddenly stopped again.  All images still display in the rotator, but no reflection again.  No canvas object at all.

    Ideas?
  17. Niko
    Admin
    Niko avatar
    387 posts

    Posted 20 Apr 2011 Link to this post

    Hi Jordan,

    Finally, I managed to reproduce the issue and it is reproducible under specific circumstances:
    1. Rotator is in CoverFlow mode and reflection is enabled.
    2. The browser is IE
    3. The cache has just been deleted.
    The third point seems to be the reason why I couldn't manage to reproduce it earlier. This is a bug and I have logged it in our PITS system. Please, use the following URL to track the progress - http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/5638.
    I am indeed grateful to your persistence and patience in this matter. I have also updated your Telerik points.
    Please, accept my apologies for the inconvenience caused.

    Best wishes,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

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