Getting Started with RadNotification

Having the ability to quickly, and easily, present an important piece of information to your users is very important. However, having a huge window or a JavaScript alert popup appear in the middle of the screen certainly isn’t too discrete and can end up annoying the user. This is why we created the RadNotification control. This new component allows you to have a similar popup to what you might already be used to from Outlook, a quick box that appears somewhere on the screens and then later disappears. In this blog post we will take a look at this new control and how you can start using it in your application today.

Setup

Keep in mind that there are several different ways to implement such a versatile control like this one, so what I’m going to be presenting here should be more seen as a first look at the control, more advanced scenarios can be found in our online documentation and demos, and will most likely be covered in a later blog post.

The RadNotification control can be found in the Telerik Container Controls section of the Visual Studio Toolbox. Dragging the control over to your form sets up the very basic properties, id and runat, so if you are manually working with the control you will have to set these up. Now you can really start to experiment a bit with all of the various properties, but I’m going to just focus on how you can get your first message displayed in the notification control.

First, since I want the message to be displayed when I initially load my page I set the VisibleOnPageLoad property to “true”. I of course also want to have some text displayed in the control I set the Text property to “First Notification!”. If I decided to run this application I would actually get a small notification window in the bottom right-hand corner of my window.

The markup that has gone into this is the following:

Not too bad. Of course, this doesn’t really do much. The control is initially displayed and then eventually goes away. Let’s change the behavior a bit.

We have the ability to define the Position property of the control, which designates where the notification is supposed to appear. The valid settings (don’t worry, they appear with intellisense) are: BottomCenter, BottomLeft, BottomRight, Center, MiddleLeft, MiddleRight, TopCenter, TopLeft, and TopRight. All of these are pretty self-explanatory but by default the BottomRight will be used if no other position is specified.

We can also play around with the various animations available. The Animation property can have the following set: None, Resize, Fade, Slide, and FlyIn. These are again easy to figure out what they do, but they have to do with how the control appears and disappears. In the case that I have above, where I load the page initially on the page, the animation will not be displayed since it is on the page on initial rendering. We can also define the duration of this animation by setting the AnimationDuration property. This should be defined in milliseconds and gives full control over just how long it takes to show and hide the control.

So, an example of using all of the properties above would be:

Content Via Callback

So we have taken a look at how to set up content initially on every load via markup, but what if we want to go back to the server to grab some data and place that in our notification window? Well, the OnCallbackUpdate event is exactly what we’re looking for. In order to have this event be fired we also need to set the LoadContentOn property. The later property is the key here, as it defines when the content will be loaded to the control. We can set this to: EveryShow, FirstShow, PageLoad, and TimeInterval. So, using PageLoad essentially has the control working like it did above, only we are going to end up back on our server (using C# or VB.NET) when the page loads. TimeInterval allows us to define a certain time interval (in milliseconds) where this event will be fired. EveryShow and FirstShow are a little different. These rely on the ShowInterval property, which is again a property to be given a millisecond parameter. If we select EveryShow our event will be triggered every time the ShowInterval time has passed. FirstShow will only raise the event the first time the control is being displayed. What does this look like when actually implemented? Well, let’s take a look at some code.

ASPX:

C#:

With the settings I have provided the code in my RadNotification1_CallbackUpdate event will be executed every time the control is going to be displayed, which according to the ShowInterval is every five seconds. Also, take note of the RadNotificationEventArgs type, which replaces the default EventArgs type. There are of course some better things to do in this event than simply provide a string to be placed as the text, but you get the overall idea of how to use this to your advantage.

Conclusion

So now you’ve seen some quick usages of the RadNotification control. There are more advanced scenarios in which this control can be used, but this gives a basic idea of what exactly the control is, and how it can be implemented. There are more examples available in both our online demos as well as documentation, so I highly recommend taking a look at those two resources once you start working with the control!