Telerik Product and Version
|
Tested with version 2015.1.401.40 and it should be compatible with previous versions.
|
|
Supported Browsers and Platforms
|
Tested with IE 9 and Up, Firefox, and Chrome
|
|
Components/Widgets used (JS frameworks, etc.)
|
JavaScript
|
PROJECT DESCRIPTION
If you want to add a loading/waiting image panel on top of your Rad Windows whenever there is a postback like this:
![]()
you can add the following code to your JavaScript file:
JavaScript:
function ShowLoad() {
try {
var DimPanel = ' <div id="DimPanel" style="opacity: 0.4 !important; filter: alpha(opacity=40) !important;"> ' +
' </div>' +
' <img id="LoadingImage" src="../Images/Loading.gif"> ';
$telerik.$(DimPanel).appendTo('body');
}
catch (err) { alert("Error while DimCssPanelClass(): " + err.Message); }
}
function HideLoad() {
try {
$telerik.$('#DimPanel').remove();
$telerik.$('#LoadingImage').remove();
if (IEVersion < 11 && $telerik.$('#DimPanel').length > 0) HideLoad(); // you might not need this line of code
}
catch (err) { alert("Error while HideLoad(): " + err.Message); }
}
CSS:
#DimPanel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgb(170, 170, 170);
}
#LoadingImage {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
}
You can call the ShowLoad() and HideLoad() accordingly to the stages of your postback or use it with Ajax.
For instance with RadAjaxManager:
<telerik:RadAjaxManager ID="AJAXManager" runat="server">
<ClientEvents OnResponseEnd="HideLoad" OnRequestStart="ShowLoad" />
</telerik:RadAjaxManager>
OR
you can use it directly on the body tag:
<body onbeforeunload="ShowLoad()">
once you figure out where you want to use it, it will work like a charm.