RadAjaxManager and ImageMap

4 posts, 1 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 20 Oct 2011 Link to this post

    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
  2. Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 25 Oct 2011 Link to this post

    Hi Bader,

    Try to place the ImageMap into an asp:UpdatePanel instead of using the AjaxManager to see if you will get different behaviour. This way we will know if the issue is in the manager or not, minimizing the scope for debuging the issue.

    Kind regards,
    Vasil
    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
  3. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 26 Oct 2011 Link to this post

    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">
     
    <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
  4. Answer
    Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 26 Oct 2011 Link to this post

    Hi Bader,

    Try to register the CloseAndNavigate JavaScript function with the ScriptManager in order to execute it after the callback. See the this help topic for more information: http://www.telerik.com/help/aspnet-ajax/ajax-execute-custom-javascript.html

    Greetings,
    Vasil
    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
Back to Top