SlideShow for RadRotator is not working in Internet explorer(7,8) when dir=rtl

[ravi shankar]

Hi telerik,

I have Rad Rotator which is working fine in the english version of the page,but in arabic version the slidshow is not happening.
Below is the ascx and ascx.cs file code.
Can u please help me out to sort this issue.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="NewsTicker.ascx.cs" Inherits="UserControls_GI_NewsTicker" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
<%@ Register TagPrefix="sfWeb" Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls" %>
<style type="text/css">
    *+html .rrItemsList
    {
        float: none !important;
    }
    *html .rrItemsList
    {
        float: none !important;
    }
</style>
<asp:UpdatePanel ID="updatePanel" runat="server">
    <ContentTemplate>
        <div class="newsHeading">
            <asp:Literal runat="server" ID="liLatestNews" Text="<%$ Resources: GlobalResource, LatestNews %>"></asp:Literal></div>
        <div  class="newsContents" >
            <telerik:RadRotator ID="radRotator" runat="server" Height="30px" Width="500px" ItemWidth="500px"
                ItemHeight="30px" FrameDuration="3000" RotatorType="SlideShowButtons" SlideShowAnimation-Duration="3000"
                SlideShowAnimation-Type="Fade" OnItemDataBound="radRotator_ItemDataBound">
                <ControlButtons LeftButtonID="img_Left" RightButtonID="img_Right" />
                <ItemTemplate>
                    <asp:HyperLink runat="server" ID="hlNavigator">
                        <asp:Literal ID="NewsTitle" runat="server" />
                    </asp:HyperLink>
                </ItemTemplate>
            </telerik:RadRotator>
        </div>
        <div class="controls">
            <asp:ImageButton ID="img_Left" runat="server" ImageUrl="~/App_Themes/English/Images/back.png"
                OnClick="Play_Click" />
            <asp:ImageButton runat="server" ID="Play" ImageUrl="~/App_Themes/English/Images/pause.png"
                OnClick="Play_Click" />
            <asp:ImageButton ID="img_Right" runat="server" ImageUrl="~/App_Themes/English/Images/forward.png"
                OnClick="Play_Click" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

newsticker.cs file

using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Telerik.Web.UI;
using System.ComponentModel;
using Telerik.Cms.Web.UI;
using Telerik.Cms.Engine;
using System.Collections.Generic;
using System.Globalization;
using Telerik.Cms.Data;
using System.Threading;
using System;
using System.Collections;

public partial class UserControls_GI_NewsTicker : System.Web.UI.UserControl
{
    #region Public Properties


    [Category("Data")]
    public string ProviderName
    {
        get
        {
            if (String.IsNullOrEmpty(this.providerName))
                this.providerName = ContentManager.DefaultProviderName;
            return this.providerName;
        }
        set
        {
            this.providerName = value;
        }
    }


    [Category("Filters")]
    public string CategoryName
    {
        get
        {
            return this.categoryName;
        }
        set
        {
            this.categoryName = value;
        }
    }
    [Category("Filters")]
    public string SortExpression
    {
        get
        {
            return this.sortExpression;
        }
        set
        {
            this.sortExpression = value;
        }
    }
    [Category("Main")]
    [WebEditor("Telerik.Cms.Web.UI.CmsUrlWebEditor, Telerik.Cms")]
    public string MoreInfoUrl
    {
        get { return moreInfoUrl; }
        set { moreInfoUrl = value; }
    }

    #endregion
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            IList dataSource = null;
            if (this.manager == null)
                this.manager = new ContentManager(this.ProviderName);
            if (!string.IsNullOrEmpty(this.CategoryName))
            {
                List<IMetaSearchInfo> filter = new List<IMetaSearchInfo>();
                // add a new filter to the list
                filter.Add(new MetaSearchInfo(MetaValueTypes.ShortText, "Category", this.CategoryName));
                dataSource = manager.GetContent(this.SortExpression, filter.ToArray());
            }
            else
            {
                dataSource = manager.GetContent();
            }

            this.radRotator.DataSource = dataSource;
            this.radRotator.DataBind();

            radRotator.RotatorType = RotatorType.SlideShow;
        }
    }

    private string moreInfoUrl;
    private ContentManager manager;
    private string providerName = "News";
    private string categoryName;
    private string sortExpression = "Position Asc";

    protected void radRotator_ItemDataBound(object sender, Telerik.Web.UI.RadRotatorEventArgs e)
    {
        IContent content = (IContent)e.Item.DataItem;

        if (content != null)
        {
            HyperLink hlNav = e.Item.FindControl("hlNavigator") as HyperLink;
            Literal newsTitle = e.Item.FindControl("NewsTitle") as Literal;
            if (newsTitle != null)
                newsTitle.Text = content.GetMetaData("SubTitle").ToString();
            string navigateTitle = content.Url.Trim();
            if (Thread.CurrentThread.CurrentUICulture.Name == "en")
                hlNav.NavigateUrl = "~/en/home/mediacentre/news/" + navigateTitle.Replace(". ", "_").Replace(" ", "_").Replace("(", "").Replace(")", "") + ".aspx";
            else
                hlNav.NavigateUrl = "~/ar/home/mediacentre/news/" + navigateTitle.Replace(". ", "_").Replace(" ", "_").Replace("(", "").Replace(")", "") + ".aspx";
        }
    }
    protected void Play_Click(object sender, ImageClickEventArgs e)
    {
        if (radRotator.RotatorType == RotatorType.SlideShow)
        {
            radRotator.RotatorType = RotatorType.SlideShowButtons;
            Play.ImageUrl = "~/App_Themes/English/Images/play.png";

        }
        else if (radRotator.RotatorType == RotatorType.SlideShowButtons)
        {
            radRotator.RotatorType = RotatorType.SlideShow;
            Play.ImageUrl = "~/App_Themes/English/Images/pause.png";

        }
    }
}

[Fiko]

Hello Ravi,

The RadRotator control does not fully support RTL scenarios and in your case I recommend you to apply the solution described in this forum thread (my last answer to in the thread) in order to achieve the desired result.

Greetings,
Fiko
the Telerik team

[K]

Hi Telerik,

My Team is using Telerik rotator and its working fine with IE 8 and Mozila but not with IE7.

1) When we particularly talk about  RotatorType="AutomaticAdvance" or  RotatorType="Slidshow" it doesnot work with IE7  at the same time  RotatorType="Carousel" works fine in 7.

2) Secound issue is with Rad Editor when we try to control its widht it get fixed in mozila but not in IE 7 or IE 8

     Though when we use Rad Editor without toolstrips we can control the width,

I have pasted my code please provide a solution, we have deliverable in short span of time

Many thanks in advanced.

Regards

Kevin

Project Head

<telerik:RadRotator ID="BlogRadRotator" ScrollDirection="Up" runat="server"
    Height="160px" Width="300px" ItemWidth="300px"  RotatorType="AutomaticAdvance"
    ScrollDuration="2000" FrameDuration="1">
    <ItemTemplate>
                <div class="labelLeft">
                    <a href="ViewBlogDetails.aspx?BlogID=<%#Eval("BlogID")%>">
                        <asp:Label ID="Label3" CssClass="timeText" runat="server" Text='<%#Eval("UserName") %>'></asp:Label></a>
                    <asp:Label ID="Label1" CssClass="dateText" runat="server" Text='<%#Eval("DateCreated") %>'></asp:Label>
                </div>
                <div class="right1Text">
                    <span>
                        <asp:Label ID="lblBlog" runat="server" Text='<%#Eval("BlogTitle") %>'></asp:Label></span>
                </div>
            <div class="cls"> </div>
    </ItemTemplate>
</telerik:RadRotator>


 <telerik:RadDockZone runat="server" ID="BlogRadDockZone" Orientation="Horizontal"
                                                    BorderStyle="None">
                                                    <telerik:RadDock runat="server" ID="BlogRadDock" Width="300px" EnableAnimation="true"
                                                        BorderStyle="None">
                                                        <ContentTemplate>
                                                            <uc1:Blog ID="uclBlog" runat="server" />
                                                        </ContentTemplate>
                                                    </telerik:RadDock>
</telerik:RadDockZone>

[K]

Can i please request Telerik team or any one to please help with the above issue

[Fiko]

Hi K,

In reference to your questions:

• The problem with the RadRotator control is caused by the fact that the control's ItemHeight  property is not specified. Could you please configure the control based on the provided formation in this help article? Then you should not experience the same inconsistent behavior.
• Could you please provide little bit more information about the issue with the RadEditor control? It will be best if you open a new support ticket and send me a runnable project which shows the problem. I will debug it and do my best to provide a working solution as soon as possible.

Regards,
Fiko
the Telerik team

[K]

Thanks Fiko , It was the issue with the height only.

Actually we set the height to 160px and when we have lesser number of records in doesnot scroll in the IE7

we got it fix by checking the count first then resizing the rotator height accordingly.

Many thanks for your responce


Regards
Kewal Chopra