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
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
0
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:
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
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:
- 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:
<linkhref='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Rotator.css") %>'rel="stylesheet" type="text/css" /><linkhref='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Default.Rotator.Default.css") %>'rel="stylesheet" type="text/css" /> - 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:RadStyleSheetManagerID="StyleSheetManager1"runat="server"><StyleSheets><telerik:StyleSheetReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Skins.Rotator.css"/><telerik:StyleSheetReferenceAssembly="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.