Product Bundles
DevCraft
All Telerik .NET and Kendo UI JavaScript components and AI Tools in one package.
Kendo UI
Bundle of AI Tools plus four JavaScript UI libraries built natively for jQuery, Angular, React and Vue.
Telerik
Build great .NET business apps
.Net Web
Cross-Platform
Desktop
Reporting and Documents
Testing & Mocking
Debugging
Build JavaScript UI
Javascript
AI for Developers & IT
Ensure AI program success
AI Coding
Additional Tools
Enhance the developer and designer experience
UI/UX Tools
Free Tools
CMS
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="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Notification.Configurator.DefaultVB" %> <%@ 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>