ProgressNotifier

progressNotifier.js

//Shows different alerts (can be used in popup or simple container mode)
(function($) {
    var Widget = kendo.ui.Widget,
        POPUPCONTAINER = "containerBox-popup",
        TEXTCONTAINER = "notifier-text",
        TEXTCONTAINERSELECTOR = "." + TEXTCONTAINER,
        NOTIFYWRAPPERID = "notify-wrapper",
        alertClasses = {
            success: "alert-success",
            inProgress: "alert-info",
            information: "alert-info",
            error: "alert-error"
        },
		    uid = 1;
    var ProgressNotifier = Widget.extend({

        options: {
            name: "ProgressNotifier",
            successMessage: "Success",
            inProgressMessage: "In progress",
            errorMessage: "Failed",
            showDelay: 2000
        },

        init: function(element, options) {
            var that = this;
            options = options || {};
            Widget.fn.init.call(that, element, options);
            if (element.id === NOTIFYWRAPPERID) {
                that.element = $("<div/>").appendTo(element);
                that._popupMode = true;
            }
            options = that.options;
            that._closeHandler = $.proxy(that._boxClose, that);
            that._classUid = uid++;
            that._$successBox = that._appendMessagebox(alertClasses.success, options.successMessage);
            that._$inProgressBox = that._appendMessagebox(alertClasses.inProgress, options.inProgressMessage);
            that._$errorBox = that._appendMessagebox(alertClasses.error, options.errorMessage);
            that._$infoBox = that._appendMessagebox(alertClasses.information, "");
            that._$messageContainers = that.element.find("." + that._classUid);
            that._$currentShown = $({});
        },

        _appendMessagebox: function(boxClass, message) {
            var divClass = "alert {0} containerBox " + this._classUid + " ";
            var $closeButton = null;
            if (this._popupMode) {
                divClass += POPUPCONTAINER;
                $closeButton = $('<div />', {
                    "class" : "notifier-close k-icon k-delete",
                    click : this._closeHandler
                });
            }
            var $boxDiv = $("<div />", { "class": kendo.format(divClass, boxClass) })
                          .append($("<div />", { "class": TEXTCONTAINER, text: message }))
                          .appendTo(this.element).hide();
            if (this._popupMode) {
                $boxDiv.append($closeButton);
            }
            return $boxDiv;
        },
        
        _boxClose: function(event) {
            event.stopPropagation();
            var $messageBox = $(event.target).parent();
            $messageBox.hide();
        },

        information: function(text, append) {
            var $messageBox = this._$infoBox;
            var html = $messageBox.children(TEXTCONTAINERSELECTOR).html();
            if (append && $messageBox.is(":visible") && html.indexOf(text) < 0) {
                $messageBox.children(TEXTCONTAINERSELECTOR).append("<br>" + text);
            }
            else {
                this._setTextIfAny($messageBox, text);
            }
            this._fadeInMessageBox($messageBox);
        },

        success: function(text) {
            var $messageBox = this._$successBox;
            this._setTextIfAny($messageBox, text);
            this._fadeInMessageBox($messageBox);
        },

        _setTextIfAny: function($messageBox, text) {
            if (text) {
                $messageBox.children(TEXTCONTAINERSELECTOR).html(text);
            }
        },

        error: function(text, xhr) {
            var $messageBox = this._$errorBox;
            if (text && xhr) {
                text = this._appendResponseMessageIfAny(text, xhr);
            }
            this._setTextIfAny($messageBox, text);
            this._fadeInMessageBox($messageBox);
        },

        hideAll: function() {
            this._stopAnimation();
            this._$messageContainers.hide();
        },

        inProgress: function() {
            this._fadeInMessageBox(this._$inProgressBox);
        },
        
        _fadeInMessageBox: function($messageBox) {
            this._stopAnimation();
            this._$currentShown.hide();
            this._animateMessagebox($messageBox);
            this._$currentShown = $messageBox;
        },

        _stopAnimation: function($messageBox) {
            $messageBox = $messageBox || this._$currentShown;
            $messageBox.stop(true, true);
        },

        _appendResponseMessageIfAny: function(message, xhr) {
            var response;
            try {
                response = $.parseJSON(xhr.responseText);
            }
            catch (e) {
                response = {};
            }
            if (response.message) {
                message += "<br>Reason: " + response.message;
            }
            return message;
        },

        _animateMessagebox: function($messageBox) {
            var delay = this.options.showDelay;
            $messageBox.fadeIn("fast")
                       .animate({ opacity: 1 }, delay)
                       .fadeOut("fast");
        },

        destroy: function() { this._$messageContainers.remove(); }
    });
    
    kendo.ui.plugin(ProgressNotifier);
    
})(jQuery);

styles.css

#notify-wrapper {
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
    text-align: center;
    position: fixed;
    margin-top: 5px;
    z-index: 100000;
}

.notifier-text {
    display: inline-block;
}

.notifier-close {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 2px;
}

.containerBox {
    text-align: center;
    font-weight: bold;
    padding: 12px 15px;
    position: relative;
}

.containerBox-popup {
    display: inline-block;
}

.popupProgressNotifier {
    position: fixed;
    width: 200px;
    height: auto;
    top: 20px;
    left: 20px;
}


.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.alert {
  color: #c09853;
}


.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}


.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

usecases

// as popup
<div id="notify-wrapper"></div>

// as inline
<div class="span8 notifier"></div> - inline


// create popup notifier
that.progressNotifier = $("#notify-wrapper").kendoProgressNotifier({
            successMessage: "Report config was successfully saved.",
            errorMessage: "Error occured during the request.",
            inProgressMessage: "Report is being built... Please wait a while."
        }).data("kendoProgressNotifier"); 

//create as inline notifier
 that._progressNotifier = $container.find(".notifier").kendoProgressNotifier({
            successMessage: "Settings saved."
        }).data("kendoProgressNotifier");

// show as in progress
 that.progressNotifier.inProgress();
 
 //show as success 
 that.progressNotifier.success();
 
 //show when error using xhr object
 errorCallback: function(xhr, status, error) {
                that.$saveButton.removeAttr("disabled");
                that.progressNotifier.error("Error occured when posting the report config: " + kendo.htmlEncode(error), xhr);
            }

//override default showDelay in ms            
 notifier = $("#notify-wrapper").kendoProgressNotifier({
    showDelay: 7000
}).data("kendoProgressNotifier");

//in grid usecase:

 that._progressNotifier = $("#notify-wrapper").kendoProgressNotifier({
            successMessage: "Applied changes saved.",
            inProgressMessage: "Saving changes... Waiting for server response.",
            errorMessage: "Server error occured."
        }).data("kendoProgressNotifier");
        
update: function(options) {
                    var assigns = that._updateParamsMap(options.data.models);
                    that._progressNotifier.inProgress();
                    $.ajax({
                        url: that._customFieldsUrls.updateAssigns,
                        type: "POST",
                        data: JSON.stringify(assigns),
                        contentType: "application/json",
                        dataType: "json"
                    }).done(function() {
                        that._progressNotifier.success();
                        options.success();
                    }).fail(function() {
                        options.error();
                        that._progressNotifier.error();
                    });
                }