This is a migrated thread and some comments may be shown as answers.

RadRotator UpdatePanel/Firefox Issue

1 Answer 37 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 02 Jul 2012, 01:38 PM
I am trying to use a RadRotator control inside an aspnet UpdatePanel.  The RadRotator displays a set of images whenever the user clicks a button.  It works as expected in IE 9, but when I view the page in Firefox (version 13.0.1), the RadRotator width is set to 0 on the first postback.  It will display on subsequent postbacks -- just not the initial one.    

The develomplent is in VS 2010, and the version of the Telerik library is 2011.3.1115.40.

Here is a simplified example of the ASPX file and CodeBehind that is causing the issue:

ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ImageRotatorTest.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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:UpdatePanel runat="server" ID="up1">
      <ContentTemplate>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
             <telerik:RadRotator ID="itemsRotator" runat="server"  Width="600px" Height="118px"
                        ItemHeight="108" ItemWidth="81" WrapFrames="false" RotatorType="Buttons" ScrollDuration="1" FrameDuration="1"
                        Visible="False" >
                        <ItemTemplate>
                            <asp:Image runat="server" Height="108" Width="81" BorderStyle="Solid" BorderColor="DarkGray" BorderWidth="1" ID="JobImage" ImageUrl='<%# Eval("ImagePath") %>' />
                        </ItemTemplate>
             </telerik:RadRotator>
    </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>


CodeBehind:
namespace ImageRotatorTest
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        class RotatorImage
        {
            public RotatorImage(string imagePath)
            {
                ImagePath = imagePath;
            }
            public string ImagePath { get; set; }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            DisplayRotator();
        }

        private void DisplayRotator()
        {
            List<RotatorImage> imageList = new List<RotatorImage>();
            imageList.Add(new RotatorImage("Images/Squirrel.jpg"));
            imageList.Add(new RotatorImage("Images/Squirrel.jpg"));
            imageList.Add(new RotatorImage("Images/Squirrel.jpg"));
            itemsRotator.Visible = true;
            itemsRotator.DataSource = imageList;
            itemsRotator.DataBind();
        }
    }
}

The problem seems to be stemming from the fact that the RadRotator visibility is initially set to false, because when it is initially set to true the problem disappears.  Unfortunately, I need to initially hide the RadRotator until the user clicks a button.   Also, eliminating the UpdatePanel is not an option because we have other code that depends on it.  Please help.


Thanks,
Scott Howard

1 Answer, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 04 Jul 2012, 10:16 AM
Hi Scott,

The problem you described is caused by an asynchronous loading of the skin style sheet resources through an AJAX request. Please load them with the main content in order to assure that they are present. There are two ways to achieve this:

  1. The first approach is to load the styles through a link tag using the Page.ClientScript.GetWebResourceUrl method. The link tag must be placed in the head content of the page:
    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Rotator.css") %>'
        rel="stylesheet" type="text/css" />
    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Default.Rotator.Default.css") %>'
        rel="stylesheet" type="text/css" />
  2. The other way is to use the RadStyleSheetManager. Note that you must register a HttpHandler in web.config in order to enable it in your project. This can be done automatically through Smart Tag, available in Design View.
    <telerik:RadStyleSheetManager ID="StyleSheetManager1" runat="server">
        <StyleSheets>
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Rotator.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Rotator.Default.css" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>

You should change the built-in skin, specified in the samples above, if you are not using the Default one.

I hope this helps. Feel free to contact us again if you run into more difficulties.

Greetings,
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.
Tags
Rotator
Asked by
Scott
Top achievements
Rank 1
Answers by
Slav
Telerik team
Share this question
or