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

Callback Support

Notifier
Elizabeth Lincoln
Roland Mendel
Yoshi Tannamuri
Catherine Dewey
Jean Fresnière
Georg Pipps
Pascale Cartrain

RadNotification can be configured to perform a callback to update its content. Generally, this leads to an improved performance as callbacks are more lightweight than postbacks and AJAX requests.

To configure the RadNotification to use a callback, you should assign a handler to its OnCallbackUpdate server event. In addition, you can pass a value from the client to the server and from the server - back to the client as this demo does.

Here is how to do this in more details:

  • Pass a value from client to server . To do this, you should set the desired value to the notification client object. In this demo, the OnClientShowing event is used due to the used configuration. Generally, when the update() method is called (internally or explicitly), the last assigned value is passed. To read the value on the server, you should use the arguments object of the OnCallbackUpdate event handler.
  • Pass a value from OnCallbackUpdate event handler to the client. In the common case, any settings in a callback will not be persisted in the ViewState and will not be passed to the client and this is how callbacks work (if the control was not additionally updated e.g with AJAX). RadNotification, however, allows you to pass a string value. To do so, you should simply set that value to the RadNotification's Value property. After that you can read the value on the client in the OnClientUpdated event.
  • The callback functionality and the OnCallbackUpdate are available and work both for simple and rich content. In the case of simple content, you can directly change the Text and ContentIcon property in the callback without using AJAX to update the notification. In case rich content (the ContentTemplate) is used, any changes you make on the content controls, will be automatically applied, again without need to use an AJAX request.

Click on a person to see whether he/she is available for an online conversation.

Related Resources

Loading Content Via Callback
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Notification.Callback.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>
    <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">
        function ShowNotification(arg) {
            var notification = $find("<%=RadNotification1.ClientID %>");
            notification.set_value(arg);
            notification.show();
        }
    </script>
    <div class="demo-container no-bg">
        <div class="notWrapper">
            <div class="notTitle">
                Notifier
            </div>
            <div class="notCont">
                <asp:Repeater runat="server" ID="itemsRepeater" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <div onclick='<%# String.Format("ShowNotification(\"{0};{1}\")" , Eval("CustomerID"),Eval("ContactName") ) %>'
                             class="notItems">
                            <div class="notThumb" style="background-image: url('<%# Eval("CustomerID", "images/{0}.jpg") %>');">
                            </div>
                            <div class="notName">
                            <%# Eval("ContactName") %>
                            </div>
                            <div>
                            <%# GetNote((((System.Data.DataRowView)Container.DataItem)["ContactName"]).ToString())%>
                            </div>
                            <div style="clear: both">
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                       ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, ContactName FROM [Customers] 
                       WHERE Country = 'Austria' OR Country = 'Belgium' OR 
                       Country = 'Canada'"></asp:SqlDataSource>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" Width="326" Animation="Fade"
                             EnableRoundedCorners="true" EnableShadow="true" Style="z-index: 35000" LoadContentOn="EveryShow"
                             VisibleTitlebar="false" OnCallbackUpdate="OnCallbackUpdate" OffsetX="-20" OffsetY="-20">
        <ContentTemplate>
            <div style="margin: 10px 5px 5px 5px;">
                <div class="userImg">
                    <asp:Image ID="img" runat="server" alt=""></asp:Image>
                </div>
                <div class="userInfo">
                    <asp:Label ID="lblName" runat="server" class="userName"></asp:Label>
                    <br />
                    <span class="userOffline">offline</span>
                    <asp:Label ID="notificationLbl" runat="server" class="userData"></asp:Label>
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadNotification>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance