Questions on UI for ASP.NET AJAX Forum

0 answers

75 views

Hi,

I am new to this rad rotator object and I came across the following old code. The issue at hand is that when I run the page, nothing shows up in the rotator control and it is blank. I performed some debugging and I do see that there are some invisible objects but I am not able to see anything. I have connected the rotator control to a sql data source and there is data in the table but nothing is getting presented in the page. I would appreciate your help in fixing this issue.

Thanks

<telerik:RadDock ID="RadDock12" runat="server" Text="Blog" Collapsed="False"

Title="Breaking Security" Width="25%" Height="170">

<ContentTemplate>

<telerik:RadRotator ID="RadRotator2" runat="server" Width="100%" Height="100%" ScrollDuration="10000" ScrollDirection="Down"

FrameDuration="6000" ItemHeight="170px" ItemWidth="100%" DataSourceID="Sql_Security" >

<ItemTemplate>

<table style="width: 100%; height: 140px; display:block; border:solid; margin-top:100px;" onclick="<%# DataBinder.Eval(Container.DataItem, "Info_Link")%>">

<tr>

<td style="vertical-align: middle; padding-right: 10px;">

<%# DataBinder.Eval(Container.DataItem, "Alert_Title")%>

</td>

<td style="font-size: 11px; vertical-align: middle">

<%# DataBinder.Eval(Container.DataItem, "Alert_Details")%>

</td>

<td style="vertical-align: middle;">

<a href="<%# DataBinder.Eval(Container.DataItem, "Info_Link") %>" target="_blank">details</a>

<%--<asp:Image ID="CustomerImage" runat="server" ImageAlign="Left"

ImageUrl='<%# String.Format("~/Img/Northwind/Customers/Thumbs/{0}.jpg", DataBinder.Eval(Container.DataItem, "Alert_Title_Image")) %>' />--%>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadRotator>

<asp:SqlDataSource ID="Sql_Security" runat="server" ConnectionString="<%$ ConnectionStrings:OLD_Reporting_Prod_DB %>"

SelectCommand="SELECT TOP 1000 [Alert_Source]

,[Alert_Title]

,[Alert_Title_Image]

,[Alert_Arrow]

,[Alert_Arrow_Image]

,[Alert_Number]

,[Alert_Number_Image]

,[Alert_Details]

,[Date_Inserted]

,[Info_Link]

FROM [Reporting].[dbo].[Security_Alert_Feed]

WHERE LEN(Alert_Details)>= 15 AND Info_Link != ''">

</asp:SqlDataSource>

</ContentTemplate>

</telerik:RadDock>

Rotator

asked on 27 Jan 2017

14 answers

335 views

Radrotator images not displaying at times

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>

Rotator

answered on 16 Jan 2017

8 answers

291 views

How to bind RadRotator to List<t>

Hello,

I have a List<string> collection and I was wondering if it was possible to bind the rad rotator to this list collectiong? What I have currently does not work; I can't get any data to show up.

Here is what I have for the aspx page:

                                <telerik:RadRotator ID="catholicFactRotator" runat="server" RotatorType="AutomaticAdvance"          
                        FrameDuration="3000" ScrollDirection="Up" >         
                        </telerik:RadRotator>          

Here is what I have for my code behind:

                        protected void Page_Load(object sender, EventArgs e)         
                {         
                    Data data = new Data();         
                     
                    this.radrotator1.DataSource = data.GetListofStrings();         
                    this.radrotator1.DataBind();         
                }         

I don't receive any errors on the page, but nothing shows up. I appreciate any help!

Thanks,

Flea#

Rotator

answered on 24 Nov 2016

5 answers

117 views

Rich content editor

What would be a good approach to allow for rich content editing for each slide, basically want to have a dynamic amount of slides depending on images in a folder that will be a background image for the slide. Then each slide needs to have a layer of rich content that can be edited per slide.

Can i create slides (server side) per images in folder and inside the slide dynamically create a radeditor that has the image as background and store the content in my database and make sure i pause the slide on mouseover (when editor is in edit mode) to allow for editing. or is there any better approach to this? anyone done something similar?

Christian

Rotator

answered on 15 Sep 2016

2 answers

104 views

Rotator Reponsive design

Hi,

I am using Rotator to display banner images in the home page. I need to enable reponsive design for the various dimensions of the mobile devices.

I have fixed the width to 100%, however for various screen size, the rotator does not seem to adjust.

Please advise how to solve this issue

Rotator

answered on 15 Sep 2016

1 answer

112 views

Best way to float text above rotator images

I am using adRotator (Q2 2016 controls) to randomly display header images on a website with fade transition. So far so good, but now I would like to have a text title on a layer above the rotator so that the title remains fixed while the images change behind it.

Can you suggest a browser-independent way approach to achieve this?

Thanks for any suggestions!

Clive

Rotator

answered on 02 Aug 2016

3 answers

84 views

RadRotator Not Refreshing

Telerik Support,

I have one page that has a RadGrid with a GridHyperLinkColumn. When the user clicks the hyperlink, a second page with a RadRotator is opened up in a new browser window. Let's say I have 2 rows of data in the grid. If I click on the first link, the image displays as expected in the RadRotator. Next if I click on the second hyperlink, it should set no images for the RadRotator, but instead the RadRotator's datasource seems to somehow be cached and reloads the initially loaded image.

Vice versa creates a similar issue. Stop running the app and restart it. Click on the second hyperlink first and the RadRotator is displayed with no image. Next click on the first hyperlink and still no image is loaded. The expected result no matter what order is selected is for the first hyperlink to display an image in the RadRotator and the second hyperlink should not display an image in the RadRotator.

Here is a video reproducing the issue both ways with a simple example: http://screencast.com/t/2batqcc8

Here is the code for page 1

ImageList.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ImageList.aspx.vb" Inherits="TestBed.ImageList" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server" Height="100%" Width="100%" AutoGenerateColumns="false">

<MasterTableView>

<Columns>

<telerik:GridHyperLinkColumn DataTextField="Text" HeaderText="Image" Target="_blank" UniqueName="Text"

DataNavigateUrlFormatString="~\ImageViewer.aspx?image={0}" DataNavigateUrlFields="Image">

</telerik:GridHyperLinkColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

ImageList.aspx.vb

Public Class ImageList

Inherits System.Web.UI.Page

Private Sub RadGrid1_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

Dim dt As New DataTable

Dim dr As DataRow

Dim col As New DataColumn("Image", GetType(Boolean))

dt.Columns.Add(col)

col = New DataColumn("Text", GetType(String))

dt.Columns.Add(col)

dr = dt.NewRow

dr("Image") = True

dr("Text") = "Image1"

dt.Rows.Add(dr)

dr = dt.NewRow

dr("Image") = False

dr("Text") = "Image2"

dt.Rows.Add(dr)

RadGrid1.DataSource = dt

End Sub

End Class

ImageViewer.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ImageViewer.aspx.vb" Inherits="TestBed.ImageViewer" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

<telerik:RadRotator ID="RadRotator1" runat="server" RenderMode="Lightweight" DataSourceID="XmlDataSource1"

Width="215px" Height="100px" ItemHeight="32px" FrameDuration="2000" ScrollDuration="2000" RotatorType="Buttons">

<ItemTemplate>

<div class="itemTemplate">

<img src="<%# XPath("SmallURL") %>" alt="" style="height: 100px; width: 100px;" onclick="SetImage('<%# XPath("LargeURL") %>');" />

</div>

</ItemTemplate>

<ControlButtons LeftButtonID="img_left" RightButtonID="img_right"></ControlButtons>

</telerik:RadRotator>

<asp:XmlDataSource ID="XmlDataSource1" runat="server"></asp:XmlDataSource>

</div>

</form>

</body>

</html>

ImageViewer.aspx.vb

Public Class ImageViewer

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim image As Boolean = CBool(Me.Request.QueryString("image"))

If image Then

XmlDataSource1.Data = "<Data><DataItem><SmallURL>/Image1.jpg</SmallURL><LargeURL>/Image1.jpg</LargeURL></DataItem></Data>"

Else

XmlDataSource1.Data = "<Data><DataItem><SmallURL></SmallURL><LargeURL></LargeURL></DataItem></Data>"

End If

End Sub

End Class

Please help.

Thanks,

Rob

Rotator

answered on 28 Jun 2016

2 answers

84 views

Server-side events when selection changes?

I have a rotator control that has a list of periods bound do it (think like a Category). When I click the button to move to a new selection, I want a grid to update with the information for that period (e.g. grab the ID of the selected period, and query for it). There doesn't seem to be a way to do this server-side though, only on the client. Is my only recourse to use Ajax to pull the data and refresh the grid when something changes in the RadRotator?

Rotator

answered on 10 Jun 2016

2 answers

89 views

Rotator Styling

I've bumped up against an issue where in the basic rotator, my button on the right overlaps the content. This happens only in Chrome, and it looks fine in all other browsers. I haven't added any styling and I'm doing it on a blank test page. So either the existing default styling is off, or there is some setting (like my widths?) that I need to adjust. Any help is appreciated.

<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" OnItemDataBound="RadRotator1_ItemDataBound" runat="server" Width="930px" Height="200px"

RotatorType="Buttons" ItemHeight="200" ItemWidth="896" >

<Items>

<telerik:RadRotatorItem></telerik:RadRotatorItem>

</Items>

<ItemTemplate>

test test test

</ItemTemplate>

</telerik:RadRotator>

Rotator

answered on 15 Apr 2016

4 answers

218 views

How to change the background color of radrotator selected item

Hi ,
I am using radrotator in my application , i just want to change the border color or color of the rotator selected item from asp.net c# code behind , can i expect some help on this

Thanks,
Mahesh

Rotator

answered on 04 Mar 2016