Loading Image on any kind of Postback

Thread is closed for posting
2 posts, 0 answers
  1. D3017868-266C-439F-ABB0-762963D499F4
    D3017868-266C-439F-ABB0-762963D499F4 avatar
    1 posts
    Member since:
    Jan 2011

    Posted 16 Nov 2015 Link to this post


    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.)



    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:




    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"> ';
      catch (err) { alert("Error while DimCssPanelClass(): " + err.Message); }

     function HideLoad() {
        try {
            if (IEVersion < 11 && $telerik.$('#DimPanel').length > 0) HideLoad(); // you might not need this line of code
        catch (err) { alert("Error while HideLoad(): " + err.Message); }


    #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" />




     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.

  2. A1CE16C4-4C2E-464E-BF18-532525D276CA
    A1CE16C4-4C2E-464E-BF18-532525D276CA avatar
    5948 posts
    Member since:
    Apr 2022

    Posted 17 Nov 2015 Link to this post

    Hi German,

    Thank you for sharing your experience with the community. I have updated your Telerik points for that.

    I only want to add a few resources that people may find helpful:


    Marin Bratanov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.