RadRotator does not display in Firefox, Opera, Chrome

[David]

I am developing a Sitecore website.  We are using RadControls for ASP.NET Ajax Q2 toolset.  The RadRotator displays fine in IE 7.0, but does not display in Firefox 3.0, Opera 9.6, or Chrome 0.3.  Any ideas why this might be?

[Serrin]

Hey David,

Could you post your code that you are using for the Rotator?  I just went to the rotator demo site in Opera and FF and all the demos display correctly. Might have something to do with the Sitecore system...  If they target IE specifically, then that would explain why other browsers aren't displaying pages properly.  IE works on it's own version of DOM, while the others actually use the standards-compliant version. 

[David]

I am creating the RadRotator programmatically.

 

protected void Page_Init(object sender, EventArgs e)
{

    RadRotator tad =

new RadRotator();
    tad.ID = "TadRotator";
    tad.Width = Unit.Pixel(850);
    tad.Height = Unit.Pixel(30);
    tad.ItemWidth = Unit.Pixel(156);
    tad.ItemHeight = Unit.Pixel(30);
    tad.RotatorType = Telerik.Web.UI.RotatorType.AutomaticAdvance;
    tad.ScrollDirection = Telerik.Web.UI.RotatorScrollDirection.Down;
    tad.ScrollDuration = 1000; //Milliseconds
    tad.FrameDuration = 8000; //Milliseconds
    Random rand = new Random();
    tad.InitialItemIndex = rand.Next(0, numads - 1);
    tad.Skin = "";
    tad.EnableAjaxSkinRendering = false;
    tad.EnableEmbeddedBaseStylesheet = false;
    tad.EnableEmbeddedSkins = false;
    tad.EnableTheming = false;
    tad.AppendDataBoundItems = true;
    tad.WrapFrames = true; //Wrap to the beginning
    tad.ItemTemplate = new RadRotatorTemplate();
    tad.DataSourceID = "XmlDSRadBanners";
    tad.ItemClick += new Telerik.Web.UI.RadRotatorEventHandler(tad_ItemClick);
    this.Controls.Add(tad);
    tad.DataBind();
}

 

 

public class RadRotatorTemplate : System.Web.UI.ITemplate
{
    public RadRotatorTemplate() { }

 

 

    public void InstantiateIn(System.Web.UI.Control container)
    {
        System.Web.UI.HtmlControls.HtmlGenericControl wrapper = 
            new System.Web.UI.HtmlControls.HtmlGenericControl("div");
        wrapper.DataBinding += new EventHandler(wrapper_DataBinding);
        container.Controls.Add(wrapper);
    }

 

 

    void wrapper_DataBinding(object sender, EventArgs e)
    {
        try
        {
            System.Web.UI.HtmlControls.HtmlGenericControl wrapper = sender as
                                         System.Web.UI.HtmlControls.HtmlGenericControl;
            Telerik.Web.UI.RadRotatorItem item = wrapper.NamingContainer as 
                                                                                    Telerik.Web.UI.RadRotatorItem;
            wrapper.InnerHtml = string.Format(
                    "<strong><img alt='{0}' src='{1}'></img></strong>",  
                    System.Web.UI.XPathBinder.Eval(item.DataItem, "./tooltip", ""),
                    System.Web.UI.XPathBinder.Eval(item.DataItem, "./img", ""));
        }
        catch (Exception)
        {}
    }
} //End nested class RadRotatorTemplate

 

 

 

 

protected void tad_ItemClick(object sender, Telerik.Web.UI.RadRotatorEventArgs e)
{
    try
    {    //Redirect all clicks to this URL
        Page.Response.Redirect("http://www.setfocus.com/careerdevelopment/staffing/staffing-services.aspx");
    }
    catch (Exception)
    {}

 

}

 

[Serrin]

Hey David,

My running guess is that this is an issue related to Sitecore...  Looking through the forums I found a few spots where people were having particular issues, but only in the Sitecore environment.  I copied your code and ran it on our test machine with a dummy xml file and it checks out in FF and Opera...  Unless the developers here have heard of this and have a solution, you might wanna contact Sitecore's customer service to ask why your controls aren't displaying properly through their CMS.  :(

[Coty]

I am having a similiar problem, using rotator and it doesn't work in chrome or firefox.

Not doing anything weird, just using Visual Studio.....it sits in a masterpage, here is the rotator code:

            <telerik:RadRotator
                ID="RadRotator1"
                runat="server"
                DataSourceID="xmlDataSource1" RotatorType="SlideShow" ScrollDuration="1000"
                Width="700px" ItemWidth="700px" ItemHeight="168px" Height="168px">
                <SlideShowAnimation Duration="3000" Type="CrossFade" />
                <ItemTemplate>
                   <img src="\\lancpa-iis1\Images\rotator\<%# XPath("Image") %>" alt="RFIImage"/>
                </ItemTemplate>
            </telerik:RadRotator>
            <asp:XmlDataSource ID="xmlDataSource1"
                XPath=""
                runat="server"
                DataFile="RotatorImages.xml">
            </asp:XmlDataSource>

Any Ideas?

[Fiko]

Hello Coty,

I am not quite sure what is causing the problem on your side. I used your configuration (with minimal changes), but I was not able to replicate the problem. Could you please rework it, open a new support ticket and send it back?

In addition, could you please declare an image outside the RadRotator control and set its src property to point to an existing image. Do you see the image?

Regards,
Fiko
the Telerik team

[Coty]

I crossposted to a new thread so I could mark an answer etc...

I believe I figured out the problem:

http://www.telerik.com/community/forums/aspnet-ajax/rotator/radrotator-not-working-on-chrome-firefox.aspx