Prasanth100
Top achievements
Rank 1
Rank 1
Prasanth100
asked on 04 Jun 2013, 11:40 AM
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">
.itemTemplate
{
width: 80px;/* 11px margin is taken into account */
height: 50px;
}
.rightArrow
{
cursor: pointer;
float: right;
}
.leftArrow
{
cursor: pointer;
float: left;
}
</style>
</head>
<body class="BODY">
<form runat="server" id="mainForm" method="post">
<telerik:RadScriptManager ID="ScriptManager1" runat="server">
</telerik:RadScriptManager>
<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">
<ItemTemplate>
<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>
</div>
</ItemTemplate>
<ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
</telerik:RadRotator>
</div>
</div>
</div>
<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"
Modal="true">
<ContentTemplate>
This is Rad Window content
</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
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
Prasanth
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">
.itemTemplate
{
width: 80px;/* 11px margin is taken into account */
height: 50px;
}
.rightArrow
{
cursor: pointer;
float: right;
}
.leftArrow
{
cursor: pointer;
float: left;
}
</style>
</head>
<body class="BODY">
<form runat="server" id="mainForm" method="post">
<telerik:RadScriptManager ID="ScriptManager1" runat="server">
</telerik:RadScriptManager>
<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">
<ItemTemplate>
<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>
</div>
</ItemTemplate>
<ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
</telerik:RadRotator>
</div>
</div>
</div>
<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"
Modal="true">
<ContentTemplate>
This is Rad Window content
</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
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
Prasanth
1 Answer, 1 is accepted
0
Accepted
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:
Regards,
Slav
Telerik
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;" />Regards,
Slav
Telerik
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.