Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Radrotator images not displaying at times

• Richard

  Posted on Sep 19, 2011 (permalink)

  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>

  Reply

• Slav Slav

  Posted on Sep 22, 2011 (permalink)

  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

  Attached files

  • RadRotatorInRadTabStrip.zip

  Reply


• Ayodele

  Posted on Jan 28, 2012 (permalink)

  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.
  

  Reply

• Ayodele

  Posted on Jan 28, 2012 (permalink)

  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>
  

  
  

  Reply

• Slav Slav

  Posted on Feb 1, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Radrotator images not displaying at times