Handling Offline State in Kendo Mobile

If you plan on releasing your Kendo UI Mobile app to the app store, then you better handle the case where the device does not have a network connection. Plus, your users will be happy if your app doesn’t just crash because they have no signal 🙂

So, how do we do that? What I am going to share is my way of setting up network status checking. It may not be the only or best way, but it works for me.

Have an Error Popup

We are going to need a way to display error messages to the user. Typically I do this by making a Kendo UI ModalView in my main HTML file. It has a header that contains the window title of “Error” and a “Close” button. The body of the view just contains a div that I will later put the error message into. We also want to make sure the style is set to display:none; so that the error view does not show up as the app is being initialized. The HTML for my error view is:

    <div id="error-view" data-role="modalview">
        <div class="error-header" data-role="header" style="display: none;">
            <div data-role="navbar">
                <span>Error</span>
                <a data-click="closeError" data-role="button" data-align="right">Close</a>
            </div>
        </div>

        <div class="message"></div>
    </div>

In my JavaScript, I then have a function that I can call from anywhere in my app to show an error, and a function to handle the “Close” button click event on the error view. Please note that you may need to change data-click="closeError" in the error view HTML to point to your function correctly, depending on where it is located in your code and how you would access it from global scope.

    showError: function (message, error) {
        console.log(message, error);
        try {
            var errorMessage = message + (error === undefined ? "" : "\n" + error.status + ": " + error.statusText);
            $("#error-view .error-header").show();
            $("#error-view .message").text(errorMessage);
            $("#error-view").show().data().kendoMobileModalView.open();
        } catch (e) {
            console.log(e);
        }
    },

    closeError: function () {
        $("#error-view").data().kendoMobileModalView.close();
    },

Add a Function to Determine Network State

Now we need a utility function to determine if we have network connectivity or not. We use Cordova’s navigator.connection.type for this.

    isOnline: function () {
        return navigator.connection.type != Connection.NONE;
    }

Check Network State Before Sending Kendo DataSource Requests

As the final step, we now want to check the connection status any time a Kendo UI DataSource wants to communicate with the server. We can do this by handling the requestStart event. This event is actually fired before the DataSource makes its AJAX request to the server, and gives us an opportunity to cancel the request.

So for each of your DataSources, add a handler to its requestStart event:

    var _onRequestStart = function (event) {
        if ( !isOnline() ) {
            showError("No network connection available. Please try again when online.");
            event.preventDefault();
            return false;
        }
    };

    var myData = new kendo.data.DataSource({
        // ... rest of configuration omitted ...
        requestStart: _onRequestStart
    });

Undo DataSource Changes (optional)

If you have a case where you want the data changesin your DataSource to be removed when the device is offline, then you can do this by calling cancelChanges() on the DataSource.

    var _onRequestStart = function (event) {
        if ( !isOnline() ) {
            showError("No network connection available. Please try again when online.");

            event.sender.cancelChanges(); // Undo changes to the DataSource

            event.preventDefault();
            return false;
        }
    };

Test it Out

If you are using Telerik’s Icenium as your development environment, then testing this is very easy. Just run your app in the simulator, expand the “Hide/Show Network Connections” toolbox, and select “None” as the connection type. Then try to perform an action that would cause a DataSource to read or write data.

Testing Offline State in Icenium

Testing Offline State in Icenium

Advertisements
Tagged with: , , , ,
Posted in KendoUI, Programming

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

CodingWithSpike is Jeff Valore. A professional software engineer, focused on JavaScript, Web Development, C# and the Microsoft stack. Jeff is currently a Software Engineer at Virtual Hold Technologies.


I am also a Pluralsight author. Check out my courses!

%d bloggers like this: