RadRotator issues with controlbuttons, ajaxpanel,etc in UI for ASP.NET AJAX

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

RadRotator issues with controlbuttons, ajaxpanel,etc

1 Answer 43 Views

Rotator

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

Meghanath Singh asked on 15 Dec 2011, 09:31 AM

errorImage.png

Hi,

I've used radrotator to display some products. Below is the code sample, there are current two problems I'm facing (as listed below)

I'm showing the product description when either user selects the radrotatoritem or when user clicks on the ControlButtons.

1)If I toggle between either of this option I get an error (error screenshot attached)
2)If I toggle between either of this option the product description is shown incorrectly for a product which i've not selected at all. This happens when i toggle between the ControlButtons and clicking on the products themselves.
3) Sometimes I get this error like the below one

A]System.Collections.Generic.List`1[SelectProducts+fileInfo] cannot be cast to [B]System.Collections.Generic.List`1[SelectProducts+fileInfo]. Type A originates from 'mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' in the context 'LoadNeither' at location 'C:\Windows\assembly\GAC_32\mscorlib\2.0.0.0__b77a5c561934e089\mscorlib.dll'. Type B originates from 'mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' in the context 'LoadNeither' at location 'C:\Windows\assembly\GAC_32\mscorlib\2.0.0.0__b77a5c561934e089\mscorlib.dll'.

Could you please help me resolve these issues? Thanks

private List<fileInfo> imagesArray

{

//Error #3 is thrown here.

get { return (List<fileInfo>)ViewState["imagesArray"]; }

set { ViewState["imagesArray"] = value; }

}

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="SelectProducts.aspx.cs"

Inherits="SelectProducts" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<telerik:RadScriptBlock ID="as" runat="server">

<script type="text/javascript">

function OnClientItemClicked(sender, args) {

sender.set_currentItemIndex(args.get_item().get_index(), true);

var objArgs = sender.get_currentItem().get_index();

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(objArgs);

}

function OnClientButtonClick(sender, args) {

var objArgs = sender.get_currentItem().get_index();

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(objArgs);

}

function ShowDescription(sender, args) {

}

</script>

</telerik:RadScriptBlock>

<title>Vitti Login</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" type="image/ico" href="Themes/Default/Images/Icons/icon_fav.ico" />

<link id="Link1" rel="stylesheet" type="text/css" runat="server" href="Themes/Default/Stylesheet/base.css"

media="all" />

<style type="text/css">

.rotatorBackground

{

margin: 0 auto;

width: 800px;

height: 400px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}

.rotNoButtonsBack

{

width: 810px;

background:url(../Images/Backgrounds/bg_Products.jpg);

background-repeat: no-repeat;

}

.rotatorStyle

{

margin: 40px auto 0px;

}

.rotatorStyle .RotatorItem

{

margin: 5px;

height: 100px;

width: 100px;

}

.rotatorCarouselStyle

{

margin: 0px auto;

}

.RotatorItem

{

border: solid 0px #666666 !important;

}

.mainDiv

{

margin-bottom: 20px;

}

.configurationPanel

{

width: 290px;

border: 0px;

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="300">

</asp:ScriptManager>

<telerik:RadWindowManager Skin="Default" ID="RadWindowManager2" ShowContentDuringLoad="false"

Modal="true" IconUrl="" VisibleStatusbar="false" ReloadOnShow="true" Behavior="Move,Close"

DestroyOnClose="true" runat="server" Width="310">

</telerik:RadWindowManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"

runat="server" DefaultLoadingPanelID="LoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="radRotProducts">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="detailsPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="chkRotationType">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="radRotProducts" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="detailsPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30"

EnableSkinTransparency="false" BackColor="#E0E0E0">

</telerik:RadAjaxLoadingPanel>

<div id="container">

<div style="float: right; height: 30px; padding-right: 5px">

<telerik:RadMenu Visible="false" ID="RadMenu2" runat="server" EnableRoundedCorners="true"

EnableShadows="true" Skin="Windows7">

<Items>

<telerik:RadMenuItem Text="About Us" AccessKey="A" Value="1">

</telerik:RadMenuItem>

<telerik:RadMenuItem IsSeparator="True" Visible="true" />

<telerik:RadMenuItem Text="Contact Us" AccessKey="C" Value="132">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

<div id="header_home">

<div id="logo">

</div>

<div id="app_title" style="visibility: hidden">

</div>

<div id="client_logo">

<asp:Image ID="imgCompanyLogo" runat="server" Height="36px" />

</div>

<div style="clear: both">

</div>

<div>

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td id="menubar_left">

</td>

<td id="menubar_middle">

<table width="100%" cellpadding="0" cellspacing="0" border="0">

<tr>

<td style="padding-top: 1px" align="right">

<asp:CheckBox AutoPostBack="true" ID="chkRotationType" Text="Automatic" runat="server"

Checked="true" OnCheckedChanged="chkRotationType_CheckedChanged" />

</td>

</tr>

</table>

</td>

<td id="menubar_right">

</td>

</tr>

</table>

</div>

<div>

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td id="bg_background_left">

</td>

<td id="bg_background_middle">

<div>

<telerik:RadAjaxPanel ID="AjaxPanel1" CssClass="rotNoButtonsBack" runat="server" LoadingPanelID="LoadingPanel1">

<div class="mainDiv">

<div class="rotatorBackground">

<%-- ItemWidth and ItemHeight include 2x5(pixels) margin and 1x2(pixels) border --%>

<telerik:RadRotator ID="radRotProducts" RotatorType="CarouselButtons" runat="server"

OnClientItemClicking ="OnClientItemClicked" EnableRandomOrder="true" PauseOnMouseOver="false"

Width="800px" Height="400px" CssClass="rotatorCarouselStyle" ItemHeight="200"

FrameDuration="2000" ItemWidth="300" ScrollDuration="500">

<ItemTemplate>

<asp:Image runat="server" ID="imgProduct" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"Image")%>'

CssClass="RotatorItem" />

</ItemTemplate>

<ControlButtons OnClientButtonClick ="OnClientButtonClick" />

</telerik:RadRotator>

</div>

</telerik:RadAjaxPanel>

<table border="0" cellpadding="3" cellspacing="2" width="750px" align="center" style="background-color: #f9f9f9;

border: 1px #f1f1f1 solid;">

<tr>

<td class="infoPane">

<div class="infoPaneBg" runat="server" id="detailsPanel">

<div class="imageDetailsHeader">

Image details:</div>

<div id="viewPanel">

<div class="details">

<strong>Name:</strong>

<asp:Label ID="labelImageName" runat="server"></asp:Label></div>

<div class="details">

<strong>Keywords:</strong>

<asp:Label ID="labelImageKeywords" runat="server"></asp:Label></div>

<div class="details">

<strong>Comments:</strong>

<asp:Label ID="labelImageComments" runat="server"></asp:Label></div>

</div>

</td>

</tr>

</table>

<br />

</div>

</td>

<td id="bg_background_right">

</td>

</tr>

</table>

</div>

<div id="footer">

<div style="float: right; padding-top: 3px; padding-right: 10px">

<a href="http://www.xyz.com" title="xyzxyzHome">

<img src="Themes/Default/Images/Logos/logo_xyz.png" alt="xyz" border="0" /></a>

</div>

<div id="sub-footer">

</div>

</div>

</form>

</body>

</html

>


       [Serializable()]
    private struct fileInfo
    {
        public string filename;
        public string name;
        public string keywords;
        public string comments;
    }
 
    private List<fileInfo> imagesArray
    {
        get { return (List<fileInfo>)ViewState["imagesArray"]; }
        set { ViewState["imagesArray"] = value; }
    }
 
protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["objUser"] != null)
        {
            objUser = Session["objUser"] as User;
        }
        if (!IsPostBack || object.Equals(imagesArray, null))
        {
            BindSubscriptionList();
            RebindRotator();
 
               // radRotProducts.Attributes.Add("onkeyup", RadAjaxManager1.GetAjaxRequestReference(radRotProducts.
        }
         
    }
 
    protected void BindSubscriptionList()
    {
 
 
 
        imagesArray = new List<fileInfo>();
        DataTable dtAllSubscriptions = (DataTable)Session["dtAllSubscriptions"];
        foreach (string fileName in System.IO.Directory.GetFiles(Server.MapPath("~/Themes/Default/Images/Buttons/BtnProducts/"), "*.png"))
        {
            string fileN = fileName.Substring(fileName.LastIndexOf("\\") + 1);
            string appShortName = fileN.Substring(fileN.LastIndexOf("_") + 1);
            appShortName = appShortName.Substring(0, appShortName.IndexOf("."));
            string filterBySub = "ApplicationShortName ='" + appShortName + "'";
            if (dtAllSubscriptions != null)
            {
 
                DataRow[] rows = dtAllSubscriptions.Select(filterBySub);
                if (rows.Length > 0)
                {
 
                    fileInfo fInfo = new fileInfo();
                    fInfo.name = "~/Themes/Default/Images/Buttons/BtnProducts/" + fileName.Substring(fileName.LastIndexOf("\\") + 1);
                    fInfo.filename = fInfo.name;
                    fInfo.keywords = "Vitti" + fInfo.name;
                    fInfo.comments = fInfo.name + "Vitti";
                    imagesArray.Add(fInfo);
                }
            }
        }
    }
 
 
    private void RebindRotator()
    {
        DataTable rotatorData = new DataTable();
        rotatorData.Columns.Add("Image");
        rotatorData.Columns.Add("Name");
        foreach (fileInfo tempInfo in imagesArray)
        {
            rotatorData.Rows.Add(new string[] { tempInfo.filename, tempInfo.name });
        }
        radRotProducts.DataSource = rotatorData;
        radRotProducts.DataBind();
       //ConfigureRotator(radRotProducts,null);
    }
 protected void LoadProductDescription(object sender, Telerik.Web.UI.RadRotatorEventArgs e)
    {
        Telerik.Web.UI.RadRotatorItem item = e.Item;
        fileInfo fInfo = imagesArray[Convert.ToInt32(item.DataItem.ToString())];
       
        //set the image information
        labelImageComments.Text = fInfo.comments;
        labelImageKeywords.Text = fInfo.keywords;
        labelImageName.Text = fInfo.name;
 
    }    
 
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        
        object item=e.Argument.ToString();
      
        RadRotatorItem radRotItem=new RadRotatorItem(item);
        Telerik.Web.UI.RadRotatorEventArgs ev = new Telerik.Web.UI.RadRotatorEventArgs(radRotItem);
        LoadProductDescription(radRotProducts, ev);
     
    }

1 Answer, 1 is accepted

answered on 19 Dec 2011, 05:26 PM

RadRotatorDemo.zip

Hi Meghanath,

I tried to reproduce the described problems, using your sample code, but to no avail. You can find attached my test project. Please compare it with your actual project and check if there are differences in the setup or if I have missed something.

Note that at the current state of affairs I am mostly guessing as to what your setup is. If you are still experiencing difficulties please try modifying the attached sample so that the problem is reproducible or prepare and send us a sample, runnable project that displays your issue so that we can examine it locally and provide a more to the point answer.

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