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

    Outlook Mail

    The RadNotification in this demo is configured to make a callback to the server at every 3000 milliseconds. It checks whether there is a new message and if so—exposes the data to the client and pops up. If there is no new message, nothing happens (just a silent check in the background). Checking with a callback provides better performance compared to using AJAX in this scenario.

    • Content_cs.aspx
      • Content_cs.aspx
      • DefaultCS.aspx
    • Content_cs.aspx.cs
    • Messages.xml
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Content_cs.aspx.cs" Inherits="Notification_Examples_OutlookMail_ContentCS" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
        <head runat="server">
            <title></title>
        </head>
        <body class="BODY">
            <form id="Form1" method="post" runat="server">
                <script type="text/javascript">
                    //<![CDATA[
     
                    var data = new Array();
                    var openedMsgs = new Array();
                    //use a flag to determine weather the item was selected by using the mouse or programmatically by the set_selected method
                    var flag = true;
     
                    function refreshGrid()
                    {
                        var grid = $find("<%=UserGrid.ClientID %>");
                        var mtv = grid.get_masterTableView();
                        var selectedItem = mtv.get_selectedItems()[0];
                        if(selectedItem)
                            selectedItem.set_selected(false);
                        mtv.set_dataSource(data);
                        mtv.dataBind();
                        var items = mtv.get_dataItems();
                        for(var i = 0; i < items.length; i++) {
                            items[i].get_element().style.fontWeight = 'bold';
                        }
     
                        if(selectedItem)
                        {
                            var index = +selectedItem._itemIndexHierarchical;
                            flag = false;
                            items[index + 1].set_selected(true);
                        }
                        for(var i = 0; i < openedMsgs.length; i++) {
                            openedMsgs[i] = openedMsgs[i] + 1;
                            items[openedMsgs[i]].get_element().style.fontWeight = 'normal';
                        }
                    }
                     
                    function OnClientUpdated(sender, args)
                    {
                        var record = sender.get_value();
                        if(record != "")
                        {
                            data.unshift(eval(record));
                            refreshGrid();
                            sender.show();
                        }
                        sender.set_value("");
                    }
                     
                    function RemoveBold(sender, args)
                    {
                        var item = args.get_item();
                        if(!Array.contains(openedMsgs, (+item._itemIndexHierarchical)) && flag)
                        {
                            openedMsgs.push(+item._itemIndexHierarchical);
                            item.get_element().style.fontWeight = 'normal';
                        }
                        flag = true;
                    }
                 
                    function OnRowCreated(sender, args)
                    {
                        var item = args.get_item();
                        item.get_element().style.fontWeight = 'bold';
                    }
                    //]]>
                </script>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                </telerik:RadScriptManager>
                <br />
                <telerik:RadGrid RenderMode="Lightweight" ID="UserGrid" AutoGenerateColumns="true" runat="server" GridLines="None"
                                 AllowSorting="true" Width="840px" AllowMultiRowSelection="false" HeaderStyle-HorizontalAlign="Center"
                                 Skin="Office2010Blue">
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="Subject" DataField="ID" Visible="False" UniqueName="ID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Author" DataField="Author" UniqueName="Author"
                                                     ItemStyle-Width="330px" HeaderStyle-Width="330px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Subject" DataField="Title" UniqueName="Title"
                                                     ItemStyle-Width="330px" HeaderStyle-Width="330px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Date" DataField="PublishDate" UniqueName="PublishDate">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="530" />
                        <Selecting AllowRowSelect="true" />
                        <DataBinding ShowEmptyRowsOnLoad="false">
                        </DataBinding>
                        <ClientEvents OnRowDblClick="RemoveBold" OnRowClick="RemoveBold" OnRowSelected="RemoveBold"
                                      OnCommand="function(){}" OnRowCreated="OnRowCreated" />
                    </ClientSettings>
                </telerik:RadGrid>
                <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" LoadContentOn="TimeInterval"
                                         Width="250" Animation="Fade" EnableRoundedCorners="true" EnableShadow="true"
                                         Skin="Default" Height="100" OnClientUpdated="OnClientUpdated"
                                         Text="<strong>You have received 1 new message!</strong>" OffsetX="-30" OffsetY="-30"
                                         UpdateInterval="3000" AutoCloseDelay="1500" ShowTitleMenu="true"
                                         ShowCloseButton="true" OnCallbackUpdate="OnCallbackUpdate">
                    <NotificationMenu>
                        <Items>
                            <telerik:RadMenuItem Text="Open Item" ImageUrl="images/open.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Flag Item" ImageUrl="images/flag.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Delete Item" ImageUrl="images/delete.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Mark As Read" ImageUrl="images/mark_as_read.png">
                            </telerik:RadMenuItem>
                        </Items>
                    </NotificationMenu>
                </telerik:RadNotification>
            </form>
        </body>
    </html>

    Support & Learning Resources

    Find Assistance