Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
Display the Notification with the current settings
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.
<%@ 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>