• "info"
• "success"
• "warning"
• "error"

... with each offering a unique look to the notification. You're definitely not limited to these and we'll go over how to create customized notifications using user-defined templates shortly.

Apart from appearance, there are a number of configuration options available that help with positioning, hiding and stacking the notifications. This is handled by passing a configuration object that outlines the configuration properties of your notification object. For example, I can update the code in my previous example to switch the position of the notification bubble to be 30px from the top of the viewport, 50px tall and that will disappear after three seconds. I'll also want to add the option to offer an "X", to allow the user to close the notification manually and make it so the notifications stack to the left instead of on top of each other. Here's what the code looks like:

kendoNotification( { 
        position: {
            top: 30                                           
        },
        height: 50,
        autoHideAfter: 3000,
        stacking: "left",
        button: true
    })

Here's an example so you can see it in action. I added a button to the bin, so you can click on it repeatedly and see the new stacking direction:

<div id="container"></div>Taking the positioning one step further, you can statically position your notifications within a container element instead of having it display solely within the context of the viewport. This is done via appendTo which allows you to specify a target element that will contain your notifications. This is only a matter of having a container element like this:

And adding the new property like this:

kendoNotification( { 
    position: {
    top: 30                             
    },
        width: "120px",
        autoHideAfter: 3000,
        button: true,
        appendTo: "#container"
    })

You're also going to want to make sure that you use the overflow: auto; for the container element to ensure that the notifications display within the context of the element and not bleed out.

Here's another live example.

Giving Notifications Your Own Flare

As I mentioned previously, you can customize the look of your notifications by using Kendo's built-in templating system. This allows you to use standard markup in conjunction with parameter tokens to define how and what information will be rendered. There are two ways of doing this. The first is by including the template markup directly into the template property of the templates configuration property. Let's review the example below:

   templates: [{
       type: "myAlert",
       template: "<div>Hey there, you #= myMessage #</div>"
    }] 
  

The templates property takes an object of templates that can be used for a specific notification object. This allows you to define different notification styles, all callable via a semantic name specified in the type property. In this example, I've created a notification template that is callable as "myAlert" and will render the notification within a div element that has a class called alertStyle. Yes, since this is standard markup, your template is completely styleable via CSS. I've added the following styling to my notifications.

.alertStyle {
  border: 1px solid;
  height: 25px;
  width: 180px;
  background: #990066;
  color: #FFF;
  font-family: "Tahoma";
  font-size: 12px;
  padding: 10px;
}

Continuing on, notice the token delimiters, "#=" and "#", around "myMessage". These hash symbols are used to identify areas in a template that should be replaced with data when the template is executed. So in this example, the expectation is that a value, referenced by "myMessage", will be passed to the template. This is done via the notification object's show() method which can accept a strong or an object as its first parameter, followed by a template type.

popupNotification.show({ myMessage: "ordered coffee!" }, "myAlert"); 

Notice that the first parameter is an object with a property called myMessage followed by a second parameter that's the type of template. You can specify any number of properties to pass to the template thus giving you tremendous power to display useful information based on user interaction with your site.

Let's take a look at this in action.

The second way, which is arguably the most flexible and maintainable method, is to take advantage of Kendo's template syntax to create templates within your normal markup pages, like this:

<script id="myAlertTemplate" type="text/x-kendo-template">
    <div class='alertStyle'>Wow, you #= myMessage #</div>
</script>

This allows you to declare them in a substantially more readable manner than trying to include them into a JavaScript object. Because the script tag type is non-standard, it's ignored by the browser allowing the Kendo template system to parse the contents and execute the code at runtime.

The other difference is in the way the template markup is passed to the template property. You'll now use jQuery's factory method, $(), to grab a reference to the template and return the markup inside of it:

 templates: [{
       type: "myAlert",
       template: $("#myAlertTemplate").html()
    }] 

Let's take a look at it.

Clearly, defining the template markup in this manner is much more readable and maintainable.

Extra! Read All About it!

The Kendo UI Core Notification widget offers a lot of flexibility and customization, allowing you to keep your users in the loop and greatly enhancing the overall user experience. And for many, the familiar jQuery-like syntax should make it a breeze to pick up and run with.

I don't think we can ever do enough to get as much information to our users as possible and being able to do it without using an external app or blocking the user experience is always a win in my book.

Disclosure: I work for Telerik, the maker of Kendo UI Core.