The challenging task in interactive map project

Few days ago I a project successfully called Interactive Map project. The development URL of this project is:
http://cpdemo.com/vistaverde/development.html
From this project I got an outline professional work and fancy works. Anyway, I was satisfying client's requirements and at time I found client has made an easy requirements visually but technically it is a tough one which I didn't perform ever. Actually, the life software engineer is quite thrilling in that sense that it is full of challenges and that's why I could not leave this despite of being a university lecturer. Anyway, here the way I solved the problem.

Requirement: to stop hiding the popup-window at click outside the popup window.
Relevance description: I was using asp.net ajax control toolkit to make a popup-window after a mouse click on some hot spot on an image map. And default behavior of the popup window as designed by the toolkit developers was to be hidden at the mouse click outside the popup window. I tried a lots of ways but I could not stop the mouse click. I used e.stopPropagation(){for FF} and e.cancelBubble=true {for IE} but nothing works for me and lastly I found some tutorials and several combination of them works.

Steps to solution:
step-1: to override the default behavior of the toolkit we need to override the function. For example, I was using popupcontrolExtender control for making popup-window. Anyone can easily download source from this URL to see the behavior of the control as set by the developers:
http://ajaxcontroltoolkit.codeplex.com/releases/view/16488#DownloadId=41941
Here, I found that _onBodyClick: handler is managing the click on the body of html page and making the __VisiblePopup hidden. So I need to override this handler as I found. This whole modification will be contained inside a dll. So I created a dll project on Visual Studio called MypopupControl

Step-2:
To override this handler I created a javascript file that contains the overridden handler which looks like the following. It is named as 'myjsfile.js' in my solution.



//starting of javascript code

try
{

AjaxControlToolkit.myPopupControlBehavior= function(element)
{
AjaxControlToolkit.myPopupControlBehavior.initializeBase(this,[element]);
};
AjaxControlToolkit.myPopupControlBehavior.prototype =
{
_onBodyClick:function()
{
if(this._popupVisible)
{
return false;
}
}
};
AjaxControlToolkit.myPopupControlBehavior.inheritsFrom(AjaxControlToolkit.PopupControlBehavior);
AjaxControlToolkit.myPopupControlBehavior.registerClass('AjaxControlToolkit.myPopupControlBehavior', AjaxControlToolkit.PopupControlBehavior);

if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();


}catch(exc){}


Here we can see that _onBodyClick handler is modified so that a visible popup wont be hidden by the mouse click on the body.

Step-3:
I also created a C# file called 'myPopupControlExtender.cs' that contains the following contents: Please note that myPopupControlExtender class inherits PopupControlExtender class of AjaxControlToolkit namespace that means it will have all the properties of PopupControlExtender class.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using AjaxControlToolkit;


[assembly: WebResource("MyPopupControl.myjsfile.js", "text/javascript")] //the custom/override javascript file is an embedded resource

namespace MyPopupControl
{

[ClientScriptResource("AjaxControlToolkit.myPopupControlBehavior", "MyPopupControl.myjsfile.js")]

public class myPopupControlExtender : PopupControlExtender
{



}

}





Here, we can see that an assembly entry is used to embed the javascript file and it will be resided inside the C# dll we will be creating.

Step-4: The mostly important step of this process is to declared the javascript file as the embedded resource and without this whole process wont be effective. So, to do this:
Right click on js file>Properties> Build Action >Embedded Resource

Step-5: Now we need to just build the project and we will get a brand new dll called MyPopupControl which is containing the modified behavior of PopupControl and in my case I created new popupcontrolextender which was named as 'myPopupControlExtender' and as its inherits all the properties of popupcontrolExtender plus containing the modified behavior of _onBodyClick:function()...so that serves my purpose of the project.

thanks. Masud.