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

Configurator

  • Demo Configurator
  • Appearance
  • Content and Behaviors

Position and Size

Animations

Other Appearance Settings

Content

  • Embedded Title Iconinfo
  • Embedded Content Iconinfo
  • Content ScrollingDefault

Behaviors

  • Embedded Show Soundnone
  • Spin UpSpin Down

About RadNotification for ASP.NET AJAX

RadNotification is a a lightweight control which can be used to display a notification message both from server and client. The notification is completely customizable, can be loaded on demand through a callback or WebService, can be automatically displayed and/or updated at specific intervals and supports different animation effects and at different positions.

RadNotification and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Can contain simple text, HTML content and ASP.NET controls
  • Automatically calculates position relative to the screen
  • Semantic rendering—DIVs only
  • Load on Demand through callback or WebService
  • Automatic updates at a specified interval
  • Automatic show at a specified interval
  • Keep on mouse over
  • Fully customizable context menu
  • AutoClose Delay
  • Animation effects
  • Content scrolling
  • Advanced Skinning
More about RadNotification for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Notification.Configurator.DefaultCS" %>

<%@ 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" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadButton1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadNotification1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadNotification1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>

    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" VisibleOnPageLoad="true" Position="Center"
                             Width="330" Height="160" Animation="Fade" EnableRoundedCorners="true" EnableShadow="true"
                             Title="Notification Title" Text="RadNotification is a lightweight control which can be used to display a notification message"
                             Style="z-index: 100000">
    </telerik:RadNotification>

    <div class="demo-container size-narrow" style="text-align: center;">
    <p>
        <asp:Label ID="Label1" Text="Display the Notification with the current settings" AssociatedControlID="RadButton1" runat="server" />
    </p>
        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" Text="Show Notification" runat="server" />
    </div>


    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View ID="View1" runat="server" Title="Appearance">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                <h4>Position and Size</h4>
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="Position" AutoPostBack="true" Label="Position">
                                <Items>
                                    <telerik:DropDownListItem Value="TopLeft" Text="Top Left" />
                                    <telerik:DropDownListItem Value="TopCenter" Text="Top Center" />
                                    <telerik:DropDownListItem Value="TopRight" Text="Top Right" />
                                    <telerik:DropDownListItem Value="MiddleLeft" Text="Middle Left" />
                                    <telerik:DropDownListItem Value="Center" Text="Center" Selected="true" />
                                    <telerik:DropDownListItem Value="MiddleRight" Text="Middle Right" />
                                    <telerik:DropDownListItem Value="BottomLeft" Text="Bottom Left" />
                                    <telerik:DropDownListItem Value="BottomCenter" Text="Bottom Center" />
                                    <telerik:DropDownListItem Value="BottomRight" Text="Bottom Right" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                                runat="server" ID="Width" Value="330" Label="Width (px)" Size="Narrow"
                                                NumberFormat-GroupSeparator="" AutoPostBack="true">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                runat="server" ID="Height" Value="160" Label="Height (px)" Size="Narrow"
                                NumberFormat-GroupSeparator="" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                runat="server" ID="OffsetX" Label="OffsetX (px)" Size="Narrow"
                                Value="0" DataType="Int64" NumberFormat-GroupSeparator="" AutoPostBack="true">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                runat="server" ID="OffsetY" Label="OffsetY (px)" Size="Narrow"
                                Value="0" NumberFormat-GroupSeparator="" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <h4>Animations</h4>
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="Animation" AutoPostBack="true" Label="Type" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="0" Text="None" />
                                    <telerik:DropDownListItem Value="1" Text="Resize" />
                                    <telerik:DropDownListItem Selected="true" Value="2" Text="Fade" />
                                    <telerik:DropDownListItem Value="4" Text="Slide" />
                                    <telerik:DropDownListItem Value="8" Text="FlyIn" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:NumericTextBox MinValue="0" runat="server" AutoPostBack="true" Label="Duration (ms)" Size="Narrow"
                                                ID="AnimationDuration" NumberFormat-DecimalDigits="0" NumberFormat-GroupSeparator=""
                                                AllowOutOfRangeAutoCorrect="true" Value="500">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                    <h4>Other Appearance Settings</h4>
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                MinValue="0" MaxValue="100" runat="server" ID="opacity" Label="Opacity"
                                Value="100" NumberFormat-GroupSeparator="" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" Checked="true" ID="corners" Text="Rounded Corners" AutoPostBack="true"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" Checked="true" ID="shadow" Text="Shadow" AutoPostBack="true"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
            <qsf:View ID="View2" runat="server" Title="Content and Behaviors">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                <h4>Content</h4>
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox runat="server" ID="Text" AutoPostBack="true" TextMode="MultiLine" Rows="3" Label="Notification Text"
                                Text="RadNotification is a lightweight control which can be used to display a notification message">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:TextBox runat="server" ID="Title" Text="Notification Title" AutoPostBack="true" Label="Notification Title"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="titleIcon" AutoPostBack="true" Label="Embedded Title Icon">
                                <Items>
                                    <telerik:DropDownListItem Value="info" Selected="true" Text="info" />
                                    <telerik:DropDownListItem Value="delete" Text="delete" />
                                    <telerik:DropDownListItem Value="deny" Text="deny" />
                                    <telerik:DropDownListItem Value="edit" Text="edit" />
                                    <telerik:DropDownListItem Value="ok" Text="ok" />
                                    <telerik:DropDownListItem Value="warning" Text="warning" />
                                    <telerik:DropDownListItem Value="none" Text="none" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="contentIcon" AutoPostBack="true" Label="Embedded Content Icon">
                                <Items>
                                    <telerik:DropDownListItem Value="info" Selected="true" Text="info" />
                                    <telerik:DropDownListItem Value="delete" Text="delete" />
                                    <telerik:DropDownListItem Value="deny" Text="deny" />
                                    <telerik:DropDownListItem Value="edit" Text="edit" />
                                    <telerik:DropDownListItem Value="ok" Text="ok" />
                                    <telerik:DropDownListItem Value="warning" Text="warning" />
                                    <telerik:DropDownListItem Value="none" Text="none" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="ContentScrolling" AutoPostBack="true" Label="Content Scrolling">
                                <Items>
                                    <telerik:DropDownListItem Value="Default" Selected="true" Text="Default" />
                                    <telerik:DropDownListItem Value="Auto" Text="Auto" />
                                    <telerik:DropDownListItem Value="None" Text="None" />
                                    <telerik:DropDownListItem Value="X" Text="X" />
                                    <telerik:DropDownListItem Value="Y" Text="Y" />
                                    <telerik:DropDownListItem Value="Both" Text="Both" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Size="Medium">
                <h4>Behaviors</h4>
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="showSound" AutoPostBack="true" Label="Embedded Show Sound">
                                <Items>
                                    <telerik:DropDownListItem Value="none" Selected="True" Text="none" />
                                    <telerik:DropDownListItem Value="info" Text="info" />
                                    <telerik:DropDownListItem Value="warning" Text="warning" />
                                    <telerik:DropDownListItem Value="ok" Text="ok" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                runat="server" ID="AutoCloseDelay" Label="AutoCloseDelay" Size="Narrow"
                                Value="3000" NumberFormat-GroupSeparator="" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" Checked="true" ID="Pinned" Text="Pinned" AutoPostBack="true"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" Checked="true" ID="keepMouse" Text="Keep Shown On Mouseover" AutoPostBack="true"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" Checked="true" ID="titlebar" Text="Visible Titlebar" AutoPostBack="true"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" Checked="true" ID="closeBtn" Text="Show Close Button" AutoPostBack="true"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance