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

Notification Menu

Click on the menu targets in the notification to see how they interact with the context menu defined in its markup. The built-in Title Menu Icon also allows left clicks to show the menu.

Event log
  • Demo Configurator
Notification menu targets

Built-in Context Menu

RadNotification offers a built-in context menu which can be used to extend the control and to attach some custom functionality.

You can use it like the regular RadContextMenu—it supports multiple targets, fully customizable layout, many client-side events and more—essentially the full functionality of the RadContextMenu is employed in RadNotification.

If the ShowTitleMenu property is set to true the menu icon will appear next to the close button in the titlebar. You can use both the left and the right mouse buttons to invoke this menu.

Tip: Set the Visible property of the NotificationMenu inner tag to false if you do not intend to use the menu in order to avoid loading its scripts and skins to the page.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Notification.NotificationMenu.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>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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">
        //<![CDATA[
        function OnClientItemClicked(sender, args) {
            var itemText = args.get_item().get_text();
            logEvent("<strong>" + itemText + "</strong>  item of notification context menu was clicked!");
        }

        function OnClientShowing() {
            logEvent("The context menu of RadNotification is showing!");
        }

        function OnClientShown() {
            logEvent("The context menu of RadNotification is shown!");
        }

        function OnClientHiding() {
            logEvent("The context menu of RadNotification is hiding!");
        }

        function OnClientHidden() {
            logEvent("The context menu of RadNotification is hidden!");
        }
        //]]>
    </script>
    <div class="demo-container size-medium">
        <p>
            Click on the menu targets in the notification to see how they interact with the context menu defined
            in its markup. The built-in Title Menu Icon also allows left clicks to show the menu.
        </p>
        <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </div>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" VisibleOnPageLoad="true"
                             Width="336" Height="190" Animation="Fade" EnableRoundedCorners="true" EnableShadow="true"
                             Title="Yoshi Tannamuri" ShowTitleMenu="true" OffsetX="-20" OffsetY="-20" AutoCloseDelay="0">
        <ContentTemplate>
            <div style="margin: 10px 5px 5px 5px;">
                <asp:Label ID="Name" runat="server" Text="Yoshi Tannamuri" CssClass="userName"></asp:Label>
                <div class="userImg">
                    <img id="img" src="../../../Img/Northwind/Customers/Thumbs/LAUGB.jpg" alt="" />
                </div>
            </div>
        </ContentTemplate>
        <NotificationMenu OnClientItemClicked="OnClientItemClicked" OnClientShowing="OnClientShowing"
                          OnClientShown="OnClientShown" OnClientHiding="OnClientHiding" OnClientHidden="OnClientHidden">
            <Targets>
                <telerik:ContextMenuElementTarget ElementID="img"></telerik:ContextMenuElementTarget>
            </Targets>
            <Items>
                <telerik:RadMenuItem Text="Sample item 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sample item 2">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sample item 3">
                </telerik:RadMenuItem>
            </Items>
        </NotificationMenu>
    </telerik:RadNotification>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" EnableAJAX="false">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadNotification1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View ID="View1" runat="server">
                <qsf:ConfiguratorColumn runat="server" ID="ConfiguratorColumn1" Title="Notification menu targets">
                    <qsf:CheckBoxList ID="options" runat="server" OnSelectedIndexChanged="OnSelectedIndexChanged"
                                      AutoPostBack="true">
                        <asp:ListItem Text="Built-in title menu icon" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Image" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Name"></asp:ListItem>
                    </qsf:CheckBoxList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance