All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Notification Overview

The Notification enables you to initialize it from any element because it does not manipulate the content of the element.

If the Notification is used with popup notifications or if static Notifications are not appended to the Notification element, the element is hidden. The reason for this behavior is the assumption that the element is not needed. However, if the Notification element is meant to contain static (not popping up) notifications, then set its tag in such a way so as to allow the nesting of the elements inside the template of the notifications. For example, inline elements (such as <span>, <a>, or <em>), cannot contain block elements (such as <div>, <p>, <ul>, <li>, or headings).

The Notification wrapper for React is a client-side wrapper for the Kendo UI Notification widget.

Basic Usage

The following example demonstrates the Notification in action.

class NotificationContainer extends React.Component {
    constructor(props) {
        super(props);
        this.showPopUpNotification = this.showPopUpNotification.bind(this);
    }

    showPopUpNotification = (e) => {
        this.popUpNotificationWidget.show('success');
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-2 example-col">
                    <button className="k-button" onClick={this.showPopUpNotification}>POPUP AT BOTTOM-RIGHT</button>
                    <Notification widgetRef={(widget) => this.popUpNotificationWidget = widget} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <NotificationContainer />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic Notification events. You can subscribe to all Notification events by the handler name.

class NotificationContainer extends React.Component {
    constructor(props) {
        super(props);
        this.showPopUpNotification = this.showPopUpNotification.bind(this);
    }

    showPopUpNotification = (e) => {
        this.popUpNotificationWidget.show('success');
    }

    onShow = (e) => {
        console.log("Tooltip is shown");
    }

    onHide = (e) => {
        console.log("Tooltip is hidden");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-2 example-col">
                    <button className="k-button" onClick={this.showPopUpNotification}>POPUP AT BOTTOM-RIGHT</button>
                    <Notification
                        widgetRef={(widget) => this.popUpNotificationWidget = widget}
                        show={this.onShow}
                        hide={this.onHide} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <NotificationContainer />,
    document.querySelector('my-app')
);
In this article