Popup Control Extenders in a grid view

If you have seen this error before then you may have been dabbling in javascript and Ajax. I wanted to hover over an icon on each row of a gridview to show more details.

For this I added an image button to the item template of the gridview and attached a Hover Menu Extender from the Ajax control toolkit. This worked great but performance became an issue when there were more records being displayed in the grid view. Eventually Internet explorer will show the above error message.

After a day of struggling I cam up with the following solution;

Hooking up a new Hover menu extender on each row looked like the source of the problem. Taking an idea from the Script Manager i decided I should have some kind of manager control I can add to the page to manage the scripts for each gridview item rather than seperately on each row.

I have an IconViewer control which contains a few icons that can be hovered, and an IconViewerManager control to store most of the JavaScript.

The part to note in the IconViewer code behind is the BindIcons method, this sets the images for my buttons but more important adds JavaScript to the onMouseOver and onMouseLeave events. The JavaScript is calling    
scripts that exists in the IconViewerManager control.

The IconViewerManager control contains the popup control extenders, this means that only 2 will exist on the page instead of one or two for every row in a gridview.

Its the JavaScript functions here that do the real work. When the icon is hovered over the Show method will be called. This sets the dynamic context key which is passed to the JavaScript method from the IconViewer control. This is to dynamically load the data from a page method added to the page that contains the gridview.

the set_parentElement method repositions the popup on the control that is also passed from the IconViewer control, this is so the popup is moved to the icon that is being hovered.

finally popupbehaviour.show displays the popup on screen.

IconViewer source:
Markup:

Code Behind:


IconViewerManager source:
Markup: