Showing Loading Image

[Juan Pablo Perez]

I've created an ajax function to open a modal Window to show information of other domain. It takes a little bit to be opened. Is there any way to show a loading image till the window is already opened?

Here is the function to open the modal Window:

function CreateWindow(contentUrl, title, width, html) {
    if (contentUrl) {
        var domain = location.hostname;
        if (location.port)
            domain += ':' + location.port;
        contentUrl = location.protocol + '//' + domain + contentUrl;
        html = '';
    }
    if (!title)
        title = '';
    if (!width)
        width = 960;
    var acts = new Array();
    acts[0] = "Refresh";
    acts[1] = "Close";
    acts[2] = "Maximize";
    var windowElement = $.telerik.window.create({
        title: title
        , html: html
        , actions: acts
        , contentUrl: contentUrl
        , modal: true
        , resizable: true
        , draggable: true
        , width: width
        , height: 900
        , onClose: function (e) {
            e.preventDefault();
            windowElement.data('tWindow').destroy();
        }
        , onRefresh: function (e) {
            windowElement.data('tWindow').center();
        }
    });
    windowElement.attr('id', 'Window');
    windowElement.data('tWindow').center().open();
}

Thanks in advance.

Juan Pablo

[Dimo]

Hello Juan Pablo,

You can use a loading image as a background of a Window's sibling element.

var window = $("#WindowID").data("tWindow");
var winEl = $(window.element);
var x = winEl.css("left");
var y = winEl.css("top");
var w = winEl.innerWidth();
var h = winEl.innerHeight();
var z = winEl.css("zIndex");

$("<div id='windowOverlay' />").css({position:"absolute", top: y, left: x, width:w, height:h, zIndex:z+1}).appendTo(winEl.parent());

The extra <div> can be removed in the WIndow's refresh event.

All the best,
Dimo
the Telerik team

[Juan Pablo Perez]

Hello Dimo,

I really don't understand what you are trying to do. Finally what I've done to solve the problem is as following:

I realised that when you add an actions that doesn't exist to the Window it creates a new link that contains a span object with a class of the name of the action that you've created.

In my case I create an action named 'Loading' and it creates the following html:

<a class="t-link" href="#">
<span class="t-icon t-loading">Loading</span>
</a>

My javascript function now is like this:

function CreateWindow(contentUrl, title, width, html) {
    if (contentUrl) {
        var domain = location.hostname;
        if (location.port)
            domain += ':' + location.port;
        contentUrl = location.protocol + '//' + domain + contentUrl;
        html = '';
    }
    if (!title)
        title = '';
    if (!width)
        width = 960;
    var acts = new Array();
    acts[0] = "Loading";
    acts[1] = "Close";
    acts[2] = "Maximize";
    var windowElement = $.telerik.window.create({
        title: title
        , html: html
        , actions: acts
        , contentUrl: contentUrl
        , modal: true
        , resizable: true
        , draggable: true
        , width: width
        , height: 1000
        , onClose: function (e) {
            e.preventDefault();
            windowElement.data('tWindow').destroy();
        }
    });
    windowElement.attr('id', 'Window');
    windowElement.data('tWindow').center().open();
}

To make the loading image to be shown I've included the following CSS:

.t-loading {
    background-image: url(../Content/Images/Loading.gif);
}

Finally, I've included the following code inside the page that is loading (in Layout view, for instance) to hide the image:

<script type="text/javascript">
    $(document).ready(function () {
        // Remove loading icon in Title in Modal Window
        $('.t-loading', window.parent.document).parent().hide();
    });
</script>

I've included 2 images, one when content is loading and the other when content is loaded.

I hope it helps.

Kind regards,

Juan Pablo

[Dimo]

Hello Juan Pablo,

Well, my code will place a large loading panel over the whole Window. Your code will place a small loading image inside the Window titlebar. Both techniques are OK, it depends on what you prefer.

Kind regards,
Dimo
the Telerik team