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

RadAjaxManager and ImageMap

3 Answers 53 Views

Ajax

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

Bader asked on 20 Oct 2011, 02:09 PM

Hi,

I have a problem with the ImageMap when using the RadAjaxManager control.
I'm setting the width and height of the ImageMap using the RadAjaxManager control (within a radwindow control), and by doing that, the post back from ImageMap is not being caught by RadAjaxManager. All I try to do is to close the radwindow control and to navigate to another page.

My ImageMap control:

<asp:ImageMap ID="EntarnceImage" hotspotmode="PostBack"

onclick="RegionMap_Clicked" runat="server" >

</asp:ImageMap>

protected void RegionMap_Clicked(Object sender, ImageMapEventArgs e)

{

excuteWindowClose.Text = "<script type='text/javascript'>CloseAndNavigate('../../HomePage.aspx')</" + "script>";

}

:
By the way, If I setting the width and height of the ImageMap in other ways without using the RadAjaxManger, then the RegionMap_Clicked event will be fired.

Please, I need your help and explaination in order to solve the above problem.

Regards,
Bader

3 Answers, 1 is accepted

answered on 26 Oct 2011, 09:38 AM

Hi,

I dont know how to use the updatepanel instead of the ajaxmanager in my case.
Below is the page code (This page is displayed within aradwindow control in maximized mode and the target is to stretch the imagemap ):

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

<%@ 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 runat="server">

<title></title>

<script language="javascript" type="text/javascript">

//Get radwindow

function GetRadWindow() {

var oWindow = null;

if (window.radWindow)

oWindow = window.radWindow;

else if (window.frameElement.radWindow)

oWindow = window.frameElement.radWindow;

return oWindow;

}

//Close radwindow and navigate to a given page

function CloseAndNavigate(path) {

var popurl = path.replace(/['"]/g, ''); ;

parent.location.href = popurl;

GetRadWindow().Close();

}

</script>

<style type="text/css">

/* Removing the following code will cause in displaying the ImageMap with scroll bars */

html, body, form

{

padding:0;

margin:0;

height:100%;

}

</style>

</head>

<body onload="FocusOnRadWindow()">

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

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Label ID="excuteWindowClose" runat="server"></asp:Label>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="EntarnceImage" LoadingPanelID="MainRadAjaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="HeightField" LoadingPanelID="MainRadAjaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="WidthField" LoadingPanelID="MainRadAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="TasksRadAjaxLoadingPanel" Skin="Vista" runat="server">

</telerik:RadAjaxLoadingPanel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function FocusOnRadWindow() {

window.setTimeout(function () {

GetRadWindow().GetContentFrame().contentWindow.focus();

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

var _height = GetRadWindow().get_popupElement().style.height.toString();

var _width = GetRadWindow().get_popupElement().style.width.toString();

var heightFieldLbl = document.getElementById("<%= HeightField.ClientID %>");

heightFieldLbl.value = _height.toString().replace("px", "");

var widthFieldLbl = document.getElementById("<%= WidthField.ClientID %>");

widthFieldLbl.value = _width.toString().replace("px", "");

ajaxManager.ajaxRequest();

}, 100);

}

</script>

</telerik:RadCodeBlock>

<asp:ImageMap ID="EntarnceImage" hotspotmode="PostBack" Visible="false" onclick="RegionMap_Clicked" runat="server" />

<asp:HiddenField ID="HeightField" runat="server" />

<asp:HiddenField ID="WidthField" runat="server" />

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Data;

using Telerik.Web.UI;

using System.IO;

using System.Drawing;

using System.Web.UI.WebControls;

using TmonavotSite;

public partial class Pages_Enterance_Default : BasePage

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

string srcImg = "~/Pages/Enterance/Imgs/MainImage.jpg";

//Get height and width

int heightValue = Convert.ToInt32(HeightField.Value.Trim()) - 20;

int widthValue = Convert.ToInt32(WidthField.Value.Trim()) - 20;

//Set the ImageMap properties

EntarnceImage.ImageUrl = srcImg;

EntarnceImage.Height = heightValue;

EntarnceImage.Width = widthValue;

EntarnceImage.Visible = true;

//Set the imagemap hotsopt cordinates

string[] _stringCords = new string[16];

int[] _intCords = new int[16];

string _crds = "741,4,813,4,823,11,823,33,811,41,744,41,730,31,730,15";

//Insert the hotspots

PolygonHotSpot _polygonHotSpot = new PolygonHotSpot();

_polygonHotSpot.Coordinates = _crds;

EntarnceImage.HotSpots.Insert(0, _polygonHotSpot);

}

protected void RegionMap_Clicked(Object sender, ImageMapEventArgs e)

{

//Close the radwindow and navigate to the home page

excuteWindowClose.Text = "<script type='text/javascript'>CloseAndNavigate('../../HomePage.aspx')</" + "script>";

}

Please I need your help in order to solve the above problem,

Regards,
Bader

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadAjaxManager and ImageMap

3 Answers, 1 is accepted