Tuesday, May 12, 2015

Remove Dot Net Nuke AJAX Partial Render Postback Overlay and Hourglass Busy Animation

When you set your Dot Net Nuke module to allow partial rendering, when the module is posted back, you get a very un-stylish washed out overlay that partially covers your page - it only covers the area that your module acquires - along with a less-than-flattering hourglass/busy animation.

Due to the way this overlay is positioned at run time it can sometimes be nowhere near your module, particularly if you have used some complex CSS or javascript to position your module.



Recently i wanted to have an ajax postback module on my partially rendered page but i didnt want this overlay/animation while the module was 'working'

This overlay comes as part of the Telerik AJAX resources included in DNN 6+.  It is delivered to the page as part of an AXD file and the contents can sometimes be difficult to find on your dotnetnuke install.

There is one simple way to remove this overlay in your module so when your module posts back the interface wont be obfuscated and you will be easily able to produce an AJAX postback module without drawing any attention to the fact that it is or has been working.

are you ready?

Simply add these 3 lines to your module's CSS file

/* REMOVE THE DNN AJAX OVERLAY */
.raDiv{display:none;}
.raColor{display:none;}
.raTransp{display:none;}

Or add this in your ASCX file

<script>
/* REMOVE THE DNN AJAX OVERLAY */
.raDiv{display:none;}
.raColor{display:none;}
.raTransp{display:none;}
</script>

There.  Don't say i never give you anything.

Note i haven't thoroughly tested whether or not this affects anything else on the page - i did test saving the settings of another module and the Telerik AJAX overlay and busy animation did display so that is enough to convince me that this mod is localised to the your module.