Notification

Description

The Notification widget allows for pop-up messages to appear on-demand.

Official Kendo UI Notification documentation

Examples

  • Basic Example
  • Using global options

This example demonstrates displaying the various types of notifications.

<label><input data-bind="value: info" /> Info</label><br/>
<label><input data-bind="value: warning" /> Warning</label><br/>
<label><input data-bind="value: success" /> Success</label><br/>
<label><input data-bind="value: error" /> Error</label><br/>
<button data-bind="click: clear">Clear All</button>
<span data-bind="kendoNotification: { info: info, warning: warning, success: success, error: error }"></span>
var ViewModel = function() {
    this.info = ko.observable();
    this.warning = ko.observable();
    this.success = ko.observable();
    this.error = ko.observable();

    this.clear = function () {
        this.info(null);
        this.warning(null);
        this.success(null);
        this.error(null);
    };
};

                            ko.applyBindings(new ViewModel());




This example demonstrates the ability to configure options globally by setting properties in ko.bindingHandlers.kendoNotification.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<label><input data-bind="value: info" /> Info</label><br/>
<label><input data-bind="value: warning" /> Warning</label><br/>
<label><input data-bind="value: success" /> Success</label><br/>
<label><input data-bind="value: error" /> Error</label><br/>
<button data-bind="click: clear">Clear All</button>
<span data-bind="kendoNotification: { info: info, warning: warning, success: success, error: error }"></span>
var ViewModel = function() {
    this.info = ko.observable();
    this.warning = ko.observable();
    this.success = ko.observable();
    this.error = ko.observable();

    this.clear = function () {
        this.info(null);
        this.warning(null);
        this.success(null);
        this.error(null);
    };
};

ko.bindingHandlers.kendoNotification.options = {
    height: 100,
    width: 200,
    position: {
        top: 10,
        right: 10
    },
    autoHideAfter: 30000
};

                            ko.applyBindings(new ViewModel());




Live Options

The kendoNotification.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
error

Displays an error notification when populated

info

Displays a normal notification when populated

success

Displays a success notification when populated

warning

Displays a warning notification when populated

widget

If specified, will populate an observable with a reference to the actual widget