Radrotator images not displaying at times

13 posts, 0 answers
  1. Richard
    Richard avatar
    1 posts
    Member since:
    Jan 2008

    Posted 19 Sep 2011 Link to this post

    I am using various Rad ajax controls on a photo theme page.  I have 2 rotators in different tabs of a tabstrip each loading the same images from a DB but displaying them differently.  Initially when the images are loaded, they are ok, but after selecting a different set of images using a RadListBox in the second tab, sometimes the images in the rotator in the first tab disappear even though they are showing in the html.  I made sure the images in each of the rotators are the same size and the height and width attributes are set correctly.  I am attaching some code snippets.  I would appreciate any help you could give on this.

    Thanks,

    Rick Freiberg
    Concinnity Marketing
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="thumbRotator">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="imagePreview" LoadingPanelID="LoadingPanel1" />
                       <telerik:AjaxUpdatedControl ControlID="RadListView1"
                           LoadingPanelID="LoadingPanel1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="thumbRotator1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="imagePreview" LoadingPanelID="LoadingPanel1" />
                       <telerik:AjaxUpdatedControl ControlID="RadListView1"
                           LoadingPanelID="LoadingPanel1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="RadListBox1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="thumbRotator"
                           LoadingPanelID="LoadingPanel1" />
                         <telerik:AjaxUpdatedControl ControlID="SqlDataSource2"
                           LoadingPanelID="LoadingPanel1" />
                       <telerik:AjaxUpdatedControl ControlID="thumbRotator1"
                           LoadingPanelID="LoadingPanel1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>
       <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Transparency="30"
           EnableSkinTransparency="true" BackColor="#E0E0E0">
       </telerik:RadAjaxLoadingPanel>


    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
                        MultiPageID="RadMultiPage1" CssClass="tabstyle" SelectedCssClass="SelectedTab"
                        Align="Right" ForeColor="White" Skin="Sitefinity">
                        <Tabs>
                            <telerik:RadTab Text="CURRENT THEME" >
                            </telerik:RadTab>
                            <telerik:RadTab Text="GALLERY" >
                            </telerik:RadTab>
                            <telerik:RadTab Text="UPLOAD PHOTOS">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                        <telerik:RadPageView ID="RadPageView1" runat="server" CssClass="photowrap_cm">
                            <div id="picsarchivevertical_cm">
                                <table width="88" >
                                    <tr>
                                        <td >
                                            <img src="Images/arrow_up2.png" id="img_up" height="20" width="40" alt="" style="cursor: pointer" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadRotator ID="thumbRotator" runat="server" RotatorType="Buttons" Width="72px"
                                                Height="240px" ItemHeight="60px" ItemWidth="73px" FrameDuration="1" ScrollDirection="Up,Down"
                                                OnItemClick="ShowImage" BorderStyle="None">
                                                <ItemTemplate>
                                                    <div>
                                                        <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' alt='gallery image'
                                                            class="RotatorImage" /><br />
                                                    </div>
                                                </ItemTemplate>
                                                <ControlButtons UpButtonID="img_up" DownButtonID="img_down" />
                                            </telerik:RadRotator>
                                            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:CMCONSUMER_IMPERIAL_WEB_QAConnectionString2 %>"
                                                SelectCommand="SELECT a.THUMBPATHFILENAME as [NAME] FROM ASSET a INNER JOIN PHOTO_OF_THE_DAY AS p ON p.ASSET_ID = a.ASSET_ID where Photo_Category = @ThemeID">
                                            <SelectParameters>
                                                <asp:ControlParameter ControlID="RadListBox1" DefaultValue="2" Name="ThemeID"
                                                    PropertyName="SelectedValue" />
                                            </SelectParameters>
                                            </asp:SqlDataSource>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img src="Images/arrow_down2.png" id="img_down" height="20" width="40" alt="" style="cursor: pointer" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="picsinglephoto_cm">
                                <asp:Image ID="imagePreview" runat="server" ImageUrl="Images/spacer.gif" Height="226px"
                                    Width="328px" AlternateText="preview" BorderWidth="0"></asp:Image><div id="picsauthor_cm">
                                      <asp:Label ID="lblUserName" runat="server" Text="Name"></asp:Label>
                                      <br />
                                        <asp:Label ID="lblPhotoDate" runat="server" Text="Date"></asp:Label></div>
                                <div id="picslikeit_cm">
                                    <asp:Label ID="lblLikes" runat="server" Text="Likes"></asp:Label> <asp:LinkButton
                                        ID="ImagelikeButton" runat="server" Text="Like" Style="text-decoration: none" />
                                    <br />
                                </div>
                            </div>
                            <div id="form_photoOfTheDayComment" class="tm10 clear">
                                </div>
                            <div id="picscomments_cm">
                            <asp:Image ID="comment_headshot" runat="server" Height="50" Width="50" CssClass="floatLeft rm10" />
                                <asp:TextBox ID="txtComment" runat="server"
                                    CssClass="form_comments fnt11 italic white" Text="Leave a comment..."
                                    TextMode="MultiLine"></asp:TextBox>
                                <br /><p class="white fnt10 podCommentCopy">
                                        By submitting this post, you grant USA Gold the permission to publish the comment
                                        on joinusagold.com</p>
                                <asp:LinkButton ID="lnkCommentSubmit" runat="server" CssClass="fnt10 white strong rightArrow podCommentSubmit"
                                    CommandName="ContentId" OnCommand="lnkCommentSubmit_OnCommand">SUBMIT</asp:LinkButton>
                                <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource1"
                                    AllowPaging="True" DataKeyNames="COMMENT_ID"
                                    ItemPlaceholderID="CommentContainer" Height="170" Skin="Sunset"
                                    onitemcommand="RadListView1_ItemCommand">
                                     
                                    <ItemTemplate>
                                         <fieldset style="float: left; width: 280px;" >
                                            <legend><%# Eval("NAME") %></legend>
                                            <div>
                                                <div style="text-align: center; float: left">
                                                    <telerik:RadBinaryImage ID="RadBinaryImage2" runat="server" AlternateText="Avatar"
                                                        ToolTip="Avatar" Width="50px" Height="50px" ResizeMode="Fit" ImageUrl='<%# Eval("AVATARPATH") %>' /></div>
                                                <div>
                                                    <div>
                                                     
                                                    <%# Eval("DATE") %>
                                                    </div>
                                                    <div>
                                                        <div>
                                                    <%# Eval("COMMENT") %>
                                                        </div>
                                                        <div>
                                                            <%# GetLikeText(Eval("LIKES").ToString()) %> it.  
                                                            <asp:LinkButton ID="likeButton" runat="server" Text="Like" CommandName="AddLike"
                                                                CommandArgument='<%# Eval("Comment_ID") %>' Style="text-decoration: none" /><br />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </ItemTemplate>
                                    <LayoutTemplate>
                                        <fieldset>
                                            <asp:PlaceHolder ID="CommentContainer" runat="server"   />
                                             <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="2" Skin="Black">
                                        <Fields>
                                            <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                        </Fields>
                                    </telerik:RadDataPager>
                                        </fieldset>
                                    </LayoutTemplate>
                                
                                </telerik:RadListView>
                            </div>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="RadPageView2">
                            <div style="width: 700px">
                                <div style="float: left" class="picsarchivevertical_cm">
                                 
                                <table width="477" >
                                    <tr>
                                        <td colspan="3"  align="center">
                                            <img src="Images/arrow_up2.png" id="img_up2" height="20" width="40" alt="" style="cursor: pointer" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                    <telerik:RadRotator ID="thumbRotator1" runat="server" RotatorType="Buttons" Width="480px"
                                                Height="214px" ItemHeight="107px" ItemWidth="160px"  FrameDuration="1" ScrollDirection="Up,Down"
                                        OnItemClick="ShowImage" BorderStyle="None" >
                                        <ItemTemplate>
                                            <div>
                                                <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' alt='gallery image'
                                                    class="BigRotatorImage" />
                                            </div>
                                        </ItemTemplate>
                                        <ControlButtons UpButtonID="img_up2" DownButtonID="img_down2" />
                                    </telerik:RadRotator>
                                    </td>
                                      
                                    </tr>
                                                                    <tr>
                                        <td colspan="3" align="center">
                                            <img src="Images/arrow_down2.png" id="img_down2" height="20" width="40" alt="" style="cursor: pointer" />
                                        </td>
                                    </tr>
     
                                    </table>
                                </div>
                                <div style="float: right">
                                    <telerik:RadListBox ID="RadListBox1" runat="server" DataValueField="ID"
                                        DataTextField="Theme" AutoPostBack="true" Height="233" Skin="Black" Width="210"
                                        onselectedindexchanged="RadListBox1_SelectedIndexChanged1">
                                    </telerik:RadListBox>
                                </div>
                            </div>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="RadPageView3">
                           <div id="picsuploadphoto_cm">
     
     
     
    <p>
     
     
    <input type="file" class="picsbrowseBtn" name="datafile" size="40" />
    </p>
    <div>
    <input type="button" class="picsbubmitBtn" value="" />
     
    </div>
    </div>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 22 Sep 2011 Link to this post

    Hello Richard,

    Using the provided code snippets I was able to recreate a similar scenario and to inspect the described problem. You can ensure that the RadRotator on the first tab is always displayed by calling its client method repaint on the OnClientTabSelected client event of the RadTabStrip, as demonstrated below:
    <script type="text/javascript">
        function TabSelected(sender, args) { // handler of event OnClientTabSelected
            $find("<%=thumbRotator.ClientID %>").repaint();
        }
    </script>

    For your convenience I have attached a sample project, containing the solution to the issue. Please use it as a reference for your further development.

    Feel free to contact us again should you encounter more problems.

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ayodele
    Ayodele avatar
    2 posts
    Member since:
    Jan 2012

    Posted 28 Jan 2012 Link to this post

    Hi I am having problems with Radrotator, on my local machine it works, but on the development machine it doesn't and the images are in an SQL database.
  5. Ayodele
    Ayodele avatar
    2 posts
    Member since:
    Jan 2012

    Posted 28 Jan 2012 Link to this post

    This is the script 


    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PhotoContent.ascx.cs"
        Inherits="Usercontrols_PhotoContent" %>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <div class="rotatorCont">
            <div class="rotator">
                <telerik:RadRotator ID="RadRotator1" runat="server" Width="488px" Height="364" ItemWidth="488px"
                    ItemHeight="364" ScrollDuration="200" DataSourceID="SqlDataSource1" OnDataBound="RadRotator1_DataBound"
                    Skin="Sunset" RotatorType="AutomaticAdvance">
                    <ItemTemplate>
                        <div class="itemTemplate">
                        <b><asp:Label runat="server" Text='<%# Eval("title") %>' /></b><br/>
                            <div class="imageStyle">
                                <telerik:RadBinaryImage Style="cursor: pointer;" runat="server" ID="RadBinaryImage1"
                                    DataValue='<%#Eval("largeimage") %>' Height='336px' Width="448px" ResizeMode="Fit"
                                    AlternateText="Click to view larger image" ToolTip='<%#Eval("title") %>' />
                            </div>
                            <div style="margin-top: -30px; position:relative; display: none; width: <%#ImageHeight.Value/1.5 %>px;">
                                <asp:TextBox runat="server" ID="TextBox1" Text='<%#Eval("title") %>' CssClass="txt"
                                    OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />
                            </div>
                        </div>
                    </ItemTemplate>
                </telerik:RadRotator>
                <div class="links">
                    <asp:Panel ID="ButtonsContainer" runat="server">
                    </asp:Panel>
                    <a href="#" id="leftArrow" title="Rotate Left" class="leftButton" visible="false">
                    </a><a href="#" id="rightArrow" title="Rotate Right" class="rightButton" visible="false">
                    </a>
                </div>
                <br />
                <br />
                    <div style="border:1px solid #fff; padding:7px; color:red; font-size:13px; margin-top:15px;">
                    <span></span>
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" Visible="false">
                        <asp:ListItem Selected="True" Text="Change on mouseclick" Value="Mouseclick"></asp:ListItem>
                        <asp:ListItem Selected="False" Text="Change on mouseover" Value="Mouseover"></asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:RadioButtonList ID="RadioButtonList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList2_SelectedIndexChanged" Visible="false">
                        <asp:ListItem Selected="True" Text="Auto Advancement" Value="AutomaticAdvance"></asp:ListItem>
                        <asp:ListItem Selected="False" Text="Buttons" Value="Buttons" ></asp:ListItem>
                    </asp:RadioButtonList>
                    
                </div>
            </div>
        </div>
       
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">


        <script type="text/javascript">


            function showItemByIndex(index) {
                // gets reference to the rotator object
                var oRotator = $find("<%= RadRotator1.ClientID %>");


                // Sets currently shown item by its index
                oRotator.set_currentItemIndex(index);
            }


        </script>


    </telerik:RadScriptBlock>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ClubsiteDB %>"
        SelectCommand="SELECT id, title,largeimage, notes FROM images WHERE (album = @albumid)"
        DeleteCommand="DELETE FROM images WHERE (id = @id)" UpdateCommand="UPDATE images SET title = @title, notes = @notes WHERE (id = @id)"
        OldValuesParameterFormatString="{0}">
        <SelectParameters>
            <asp:QueryStringParameter DefaultValue="1" Name="albumid" QueryStringField="albumid" />
        </SelectParameters>
        <DeleteParameters>
            <asp:Parameter Name="id" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="title" />
            <asp:Parameter Name="notes" />
            <asp:Parameter Name="id" />
        </UpdateParameters>
    </asp:SqlDataSource>

  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 01 Feb 2012 Link to this post

    Hello Ayodele,

    Note that RadBinaryImage doesn't work in WebFarm / WebGarden scenarios, so they most probably will not be displayed if you are using this approach on your development machine.

    Your RadRotator appears to be configured correctly. Please provide more information on the problem that you have encountered - is it related to the images in RadRotator's items or to the overall behavior of the control? A live URL to the problematic page will also be useful for determining the cause for the unexpected behavior.

    Regards,
    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
  7. Qurat
    Qurat avatar
    21 posts
    Member since:
    Jan 2013

    Posted 09 Apr 2013 Link to this post


    hi when i write this line: thumbrotator.RotatorType = RotatorType.ButtonsOver;

    it gives me this Error
    Error    2    'Telerik.WebControls.RadRotator' does not contain a definition for 'RotatorType' and no extension method 'RotatorType' accepting a first argument of type 'Telerik.WebControls.RadRotator' could be found (are you missing a using directive or an assembly reference?)   

    regards
    @nnu
    Punjab lok sujag
  8. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 11 Apr 2013 Link to this post

    Hi Qurat,

    It appears that you are currently using the classic RadRotator and the property you are trying to utilize is available in the rotator from the RadControls for ASP.NET AJAX suite. My suggestion is to migrate to the RadRotator for ASP.NET AJAX, which has simplified configuration logic that will allow you to easily replace the old version with the new one. The steps that are listed in this help article will help you update the rotator. You will notice that the article is for the dock, yet the steps are similar for the rotator control.

    Kind regards,
    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.
  9. Qurat
    Qurat avatar
    21 posts
    Member since:
    Jan 2013

    Posted 26 Apr 2013 Link to this post

    Hi,
    i want to clear images from radrotator once a new value is selected from radcombobox.
    i am using radrotator and radcombobox.the district name is selected from radcombobox and its correponding images are displayed.
    there is just one problem that all the districts don't have same number of images to be displayed.the district with less pictures shows blank segments for pictures meaning that once images are created they are not being cleared.
    i am attaching my code kindly have a look.

    regards
    @nnu
    Punjab Lok Sujag
  10. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 30 Apr 2013 Link to this post

    Hello Qurat,

    If I understand you correctly when a new RadComboBox item is selected, a request to the server is performed and the new pictures are data-bound to the RadRotator. Note that there are some requirements for the size of the rotator and its items that are described in this help article. You need to ensure the size properties are set according to the suggestions in the article. When the request is made I would suggest checking if there are enough images to be displayed in the rotator and change its size if needed, otherwise there will be blank space in its viewport.

    Kind regards,
    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.
  11. Piyushkumar
    Piyushkumar avatar
    25 posts
    Member since:
    Nov 2010

    Posted 12 Nov 2013 Link to this post

    Hi,

    I have similar problem as mentioned by Richard in this post.

    I have placed Rotator in the UserControl and it is placed on a page. It is supposed to show two images at a time.

    However, it is showing only first image. The second image remain hidden.
    Any guess ??

    Thank you,
    Piyush

  12. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 Nov 2013 Link to this post

    Hello Piyushkumar,

    I would suggest checking this help article about configuring the RadRotator. The behavior you described is usually examined when the size of the rotator is not set accordingly, so the information inside should help you display both items in the viewport of the control.

    Regards,
    Slav
    Telerik
    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 the blog feed now.
  13. Piyushkumar
    Piyushkumar avatar
    25 posts
    Member since:
    Nov 2010

    Posted 22 Nov 2013 Link to this post

    Hi,

    Thank you for your reply. Something really weird is happening..

    I have kept rotator on Login.aspx page which is the first page loaded before user logs in.

    I have noticed that rotator displays only single image when I access this page before log in.
    I have used same code on another page which displays images correctly.

    To confirm the issue, I created exactly same DummyLogin.aspx page.
    Now I logged in using "DummyLogin.aspx" and then navigate to actual "Login.aspx" page having rotator, and the rotator works OK.

    Question: Is there anything on Telerik side that requires log-in or forms authentication with ASP.Net?
    Question: Are Telerik HttpHandlers available before log-in?

    Thank you,
    Piyush
  14. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 27 Nov 2013 Link to this post

    Hi Piyushkumar,

    The RadRotator should not be affected if there is authentication implemented in the application.

    The access to the HTTP handler (WebResource.axd) that is used by the RadControls, could not be granted if the website denies access to all pages to unauthorized users. This can be changed by adding a location section in web.config that allows access to the HTTP handler, as shown in this help article.

    Nevertheless, the problem you are describing seems to be related to the datasource of the rotator, if no changes were made to the size of the control in both cases. Please check whether the same images are loaded in the rotator before and after logging in.

    Also, verify that you have configured all size properties of RadRotator as described in this help article.

    Regards,
    Slav
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017