Loading Image on any kind of Postback

2 posts, 0 answers
  1. German
    German avatar
    1 posts
    Member since:
    Jan 2011

    Posted 16 Nov 2015 Link to this post

    Requirements

    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.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    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:

    Regards,

    Marin Bratanov
    Telerik
    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