Rad Rotator is not firing when image is clicked

2 posts, 1 answers
  1. Prasanth100
    Prasanth100 avatar
    17 posts
    Member since:
    Oct 2012

    Posted 04 Jun 2013 Link to this post

    Hi Experts,

       I have created Rotator, where if i click on image javascript should open,it should be done from code behind.
    Now the problem is, if i click on any corner or outside the image,(ItemClick) event is firing,but when i click on the image it is not firing.
    How to accomplish this,please help me with this,its urgent.

    Here is my code :

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <style type="text/css">
                width: 80px;/* 11px margin is taken into account */
                height: 50px;
                cursor: pointer;
                float: right;
                cursor: pointer;
                float: left;


    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        <div style="width: 454px;">
    <asp:Image ImageUrl="images/right.gif" ID="img_right" AlternateText="right" runat="server"
    CssClass="rightArrow" />
            <asp:Image ImageUrl="images/left.gif" ID="img_left" AlternateText="left" runat="server" CssClass="leftArrow"/>
            <div style="background-image: url(images/bg.gif); width: 355px; height: 103px; margin-left: 49px;
                padding-top: 19px; background-repeat: no-repeat; box-sizing: border-box; -moz-box-sizing: border-box;">
                <div style="margin-left: 20px; padding-top: 20px;">
                    <telerik:RadRotator DataSourceID="xmlDataSource1" runat="server" ID="RadRotator1" 
                    OnItemCreated="RadRotator1_OnItemCreated" OnItemClick="RadRotator1_OnItemClick"     Width="314" Height="50" ItemWidth="80" ItemHeight="50" FrameDuration="1" RotatorType="ButtonsOver">
                            <div class="itemTemplate">
                            <asp:ImageButton ID="Img1" runat="server"  ImageUrl='Images/<%# XPath("Image") %>' AlternateText="" style="margin: 0px 11px;" /> 
                            <asp:Label ID="RowIndex" runat="server"></asp:Label>
                        <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
        <br />
        <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="~/data.xml"></asp:XmlDataSource>
        <telerik:RadWindow ID="UserListDialog" runat="server" Title="Editing record" Height="320px" 
                    Width="310px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"
                    This is Rad Window content
    Code Behind
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;

    public partial class Default3 : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)


        protected void RadRotator1_OnItemCreated(object sender, RadRotatorEventArgs e)
            if (e.Item.DataItem != null)
                Label RowIndex = (Label)e.Item.FindControl("RowIndex");

                ImageButton image1 = e.Item.FindControl("Img1") as ImageButton;// Find the asp:Image server control
                RowIndex.Text = Convert.ToString(e.Item.Index);

                string text = Convert.ToString(RowIndex.Text);
                ClientScript.RegisterClientScriptBlock(GetType(), "ClientScript", "<script>alert('" + text + "')</script>");


        protected void RadRotator1_OnItemClick(object sender, RadRotatorEventArgs e)
            RadRotator rotator = sender as RadRotator;
            rotator.InitialItemIndex = e.Item.Index;// Persist the index 

            string text = Convert.ToString(rotator.InitialItemIndex);
            ClientScript.RegisterClientScriptBlock(GetType(), "ClientScript", "<script>alert('" + text + "')</script>");


    Please help me with this.

    Thanks in Advance
  2. Answer
    Slav avatar
    1359 posts

    Posted 07 Jun 2013 Link to this post

    Hi Prasanth,

    This happens because the ImageButton in the RadRotator item performs a postback and the click event does not bubble to the rotator, thus its server-side event is not raised. You can avoid this by canceling the click event of the image button in order to let the rotator handle it. The following code sample shows how to do this:
    <asp:ImageButton ID="Img1" runat="server" OnClientClick="return false;" ImageUrl='<%# ResolveUrl("Images/" +  XPath("Image")) %>' AlternateText="" style="margin: 0px 11px;" />

    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