This is a migrated thread and some comments may be shown as answers.

Radrotator images not displaying at times

14 Answers 348 Views

Rotator

This is a migrated thread and some comments may be shown as answers.

Richard asked on 19 Sep 2011, 03:43 PM

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 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>

<%# Eval("DATE") %>

</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>

</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>

</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>

</telerik:RadPageView>

</telerik:RadMultiPage>

14 Answers, 1 is accepted

answered on 22 Sep 2011, 01:52 PM

RadRotatorInRadTabStrip.zip

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

answered on 28 Jan 2012, 05:24 PM

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>

answered on 01 Feb 2012, 03:25 PM

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

answered on 11 Apr 2013, 11:16 AM

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

answered on 26 Apr 2013, 06:05 AM

radrotator-aspx.jpg

radrotator-cs.jpg

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

answered on 30 Apr 2013, 07:14 AM

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

answered on 22 Nov 2013, 08:25 PM

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

answered on 27 Nov 2013, 12:36 PM

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

answered on 12 Jan 2017, 06:27 AM

Hi Slav,

Am facing problem binding rad rotator at client side with dynamic data and below is the code(Both client side code and server side) snippet what am trying

------ Client Side Code ------

--------------Server Side code ----------------

/// <summary>
/// to rebind rad rotator
/// </summary>
/// <param name="imageName"></param>
/// <returns></returns>
[WebMethod]
public static string RebindRadRotator()
{
try
{
Frm_Mustering objMustering = new Frm_Mustering();
DataTable dt1 = objMustering.getList();

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row1;
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
if (dt1 != null)
{
string strJsonData = "";
strJsonData = (string)Newtonsoft.Json.JsonConvert.SerializeObject(dt1);
foreach (DataRow dr in dt1.Rows)
{
row1 = new Dictionary<string, object>();
foreach (DataColumn col in dt1.Columns)
{
row1.Add(col.ColumnName, dr[col]);
}
rows.Add(row1);
}
}
if (rows.Count > 0)
return serializer.Serialize(rows);
else
return null;
}
catch (Exception ee)
{
WriteLogs.WriteErrorLogs("Exception Frm_Mustering.RebindRadRotator" + " " + " " + ee.ToString() + " " + DateTime.Now.ToString());
return null;
}
}

public DataTable getList()
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("../ListOfTemplateImages"));
List<String> images = new List<string>(filesindirectory.Count());
//List<String> imgName = new List<string>(filesindirectory.Count());

DataTable rotatorData = new DataTable();
rotatorData.Columns.Add("Image");
rotatorData.Columns.Add("Name");

foreach (string item in filesindirectory)
{
//images.Add(String.Format("../ListOfTemplateImages/{0}", System.IO.Path.GetFileName(item)));
string imgUrl = "../ListOfTemplateImages/" + System.IO.Path.GetFileName(item);
//imgName.Add(String.Format(System.IO.Path.GetFileName(item)));
rotatorData.Rows.Add(new string[] { imgUrl, System.IO.Path.GetFileName(item).Split('.')[0] });
}
return rotatorData;
}

Please let me know if am missing any this or any other way to achieve this.

Thanks & Regards

Khadeer Sharief

answered on 16 Jan 2017, 01:33 PM

Hello Khadeer,

Make sure the returned JSON looks like in the following example and that the client templates of the items have proper field names used so they match your data: http://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/data-binding/client-side-data-binding#simple-data-binding.

There are two other ways to bind a rotator client-side:

via a RadClientDataSource: http://demos.telerik.com/aspnet-ajax/rotator/examples/data-binding/client-side-binding/client-data-source-binding/defaultcs.aspx (again, make sure the response and field names match).
manage the rotator items yourself by loopting through the existing items and through the data source: http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapiitemsmanagement/defaultcs.aspx.

You may also want to consider its built-in load-on-demand mechanism: http://demos.telerik.com/aspnet-ajax/rotator/examples/loadondemand/defaultcs.aspx.

I hope these examples will help you get the desired functionality in your project.

Regards,

Marin Bratanov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.