New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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
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)
{
       eventArgs.set_cancel(!confirm('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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <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!");
        }
    </script>
    <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>        
    </div>
    <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">
        <ContentTemplate>
            <asp:Literal ID="lbl" runat="server"></asp:Literal>
        </ContentTemplate>
    </telerik:RadNotification>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance