Notification - Client-side Events

The RadNotification in this demo is configured to show at every 5 seconds, update on every show and auto close after 3 seconds. The corresponding client events are logged in the console.

Event log

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
RadNotification provides the following client-side events:
  • OnClientShowing—fires just before RadNotification is shown. It can be canceled.
  • OnClientShown—fires after RadNotification is shown
  • OnClientUpdating—fires just before RadNotification content is updated. It can be canceled.
  • OnClientUpdated—fires after RadNotification content is updated
  • OnClientUpdateError—fires if an error was thrown when RadNotification content is updated. An error alert which can be canceled is displayed.
  • OnClientHiding—fires just before RadNotification hides
  • OnClientHidden—fires after RadNotification hides

Note: If a notification menu is configured, it has its own client events, which can be handled as shown in the Notification Menu demo.

The properties expect the name of a client-side function to be called. When invoked, two arguments are supplied to the function—the sender[the notification itself], and an events argument.
Using the events argument set_cancel method, it is possible to cancel three of the client-side events, namely—OnClientShowing, OnClientUpdating and OnClientHiding. Here is how to do so:

function OnClientShowing(sender, eventArgs)
'Show notification?'));

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Notification.ClientSideEvents.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        function OnClientShowing(sender, args) {
            logEvent("RadNotification is showing! This event can be cancelled!");

        function OnClientShown(sender, args) {
            logEvent("RadNotification is shown!");

        function OnClientUpdating(sender, args) {
            logEvent("RadNotification content is updating! This event can be cancelled! The new content which will be set is: " + args.get_content());

        function OnClientUpdated(sender, args) {
            logEvent("RadNotification content is updated!");

        function OnClientHiding(sender, args) {
            logEvent("RadNotification is hiding! This event can be cancelled! The notification was closed manually by the user: " + args.get_manualClose());

        function OnClientHidden(sender, args) {
            logEvent("RadNotification is hidden!");
    <div class="demo-container size-medium">
        <p>The RadNotification in this demo is configured to show at every 5 seconds, update on every show and auto close after 3 seconds. The corresponding client events are logged in the console.</p>        
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" ShowInterval="5000"
        VisibleOnPageLoad="true" LoadContentOn="EveryShow" Width="300" Height="120" Animation="Fade"
        EnableRoundedCorners="true" EnableShadow="true" OnClientShowing="OnClientShowing"
        OnClientShown="OnClientShown" OnClientUpdating="OnClientUpdating" OnClientUpdated="OnClientUpdated"
        OnClientHiding="OnClientHiding" OnClientHidden="OnClientHidden" Title="Notification Title"
        OffsetX="-20" OffsetY="-20" OnCallbackUpdate="OnCallbackUpdate" TitleIcon="none">
            <asp:Literal ID="lbl" runat="server"></asp:Literal>

Find Assistance

Help Us Improve

Was this example helpful?