Question

I am developing a mobile web app using Kendo UI Mobile. Whenever we make any AJAX calls, or our DataSources make them we call app.startLoading() to show the loading icon to the user. This works very well.

However, depending on the context in which the call is made we would like to change the text that is displayed along with the loading icon. I know you can define this when I create the kendo.mobile.Application instance. How can I change it afterwards?

The documentation does not suggest a way to do this, and a browse of the source code did not help me either. Is this really not possible?

EDIT: This is using Kendo UI Mobile v.2012.3.1114

Answer 1

I usually make a “utility” function to do this:

    var _kendoApp = new kendo.mobile.Application(document.body, {});

    var showLoading = function (message) {
        _kendoApp.loading = "<h1>" + (message ? message : "Loading...") + "</h1>";
        _kendoApp.showLoading();
    };

I am also setting a default message of “Loading…” if one isn’t passed in.

---

Edit:

I could have sworn that worked for me in a past app I did, but judging by thr source, I think you are right, my answer above shouldn’t work. My best suggestion is to add a class to the message element so you can target it, and use jQuery to change the text.

var _kendoApp;

var showLoading = function (message) {
    $(".loading-message").text(message ? message : "Loading...");
    _kendoApp.showLoading();
};

_kendoApp = new kendo.mobile.Application(document.body, {
    loading: '<h1 class="loading-message">Loading...</h1>'
});