RadRotator Arrows Style Issue

2 posts, 0 answers
  1. Dan Miller
    Dan Miller avatar
    23 posts
    Member since:
    Jul 2010

    Posted 07 Oct 2010 Link to this post

    I created an image gallery very similar to the one in the demo for the RadRotator (demo here) and the arrows for the rotator are appearing one and a half times on the top and bottom (see rotatorarrows.jpg). I am using the Forest skin. I have created the same rotator on a different website I built using the WebBlue skin and everything worked perfect. I assume it is some sort of CSS styling issue but I have no idea how to fix it. Help please!

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadRotatorThumbs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ImagePreview" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30" BackColor="#E0E0E0">
        <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' alt="Loading..." style="border: 0;" />
    </telerik:RadAjaxLoadingPanel>
    <table width="780px">
        <tr>
            <td width="180px">
                <telerik:RadRotator ID="RadRotatorThumbs" Skin="Forest" runat="server" OnItemClick="LoadImage" Width="130px" Height="400px" ItemHeight="60px" ItemWidth="115px" RotatorType="ButtonsOver" ScrollDirection="Up, Down" ScrollDuration="700" FrameDuration="1">
                    <ItemTemplate>
                        <asp:Image runat="server" ID="Image" ImageUrl='<%# Eval("ImageUrl","{0}") %>' />
                    </ItemTemplate>
                </telerik:RadRotator>
            </td>
            <td width="600px">
                <asp:Image runat="server" ID="ImagePreview" ImageUrl="" AlternateText="" />
            </td>
        </tr>
    </table>

    public partial class Controls_Photos : System.Web.UI.UserControl
    {
        private string _thumbPath = "/thumbnails";
        private string _fullImagePath = "~/Images/photos";
     
        [Serializable()]
        private struct fileInfo
        {
            public string filename;
        }
     
        private List<fileInfo> imagesArray
        {
            get
            {
                return (List<fileInfo>)ViewState["imagesArray"];
            }
            set
            {
                ViewState["imagesArray"] = value;
            }
        }
        public string ThumbPath
        {
            get
            {
                return _thumbPath;
            }
            set
            {
                _thumbPath = value;
            }
        }
     
        public string FullImagePath
        {
            get
            {
                return _fullImagePath;
            }
            set
            {
                _fullImagePath = value;
            }
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable myTable = CreateDataTable();
            if (!IsPostBack || object.Equals(imagesArray, null))
            {
                imagesArray = new List<fileInfo>();
                foreach (string fileName in System.IO.Directory.GetFiles(Server.MapPath(FullImagePath + ThumbPath), "*thumb*")) //add functionality to sort by modified date
                {
                    fileInfo fInfo = new fileInfo();
                    fInfo.filename = FullImagePath + ThumbPath + "/" + fileName.Substring(fileName.LastIndexOf("\\") + 1);
                    imagesArray.Add(fInfo);
                    AddRow(ref myTable, fInfo.filename);
                }
                RadRotatorThumbs.DataSource = myTable.DefaultView;
                RadRotatorThumbs.DataBind();
     
                ImagePreview.ImageUrl = imagesArray[0].filename.Replace("_thumb", "").Replace(ThumbPath, "");
            }
        }
     
        protected DataTable CreateDataTable()
        {
            DataTable myTable = new DataTable();
     
            DataColumn myColumn = new DataColumn();
            myColumn.DataType = Type.GetType("System.String");
            myColumn.ColumnName = "ImageUrl";
            myTable.Columns.Add(myColumn);
     
            return myTable;
        }
     
        protected void AddRow(ref DataTable myTable, string path)
        {
            DataRow myRow;
            myRow = myTable.NewRow();
            myRow["ImageUrl"] = path;
            myTable.Rows.Add(myRow);
        }
     
        protected void LoadImage(object sender, RadRotatorEventArgs e)
        {
            fileInfo fInfo = imagesArray[e.Item.Index];
            ImagePreview.ImageUrl = fInfo.filename.Replace("_thumb", "").Replace(ThumbPath, "");
        }
    }

  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 13 Oct 2010 Link to this post

    Hi Dan,

    I used the provided information but unfortunately I was not able to reproduce the behavior shown in the screenshot. I also believe that the issue is caused by some CSS properties that override the CSS settings of the RadRotator control. This is why, could you please modify my test project in order to show the problem and send it back? You need to open a new support ticket in order to attach the project back.

    Greetings,
    Fiko
    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
Back to Top