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

Ajaxify Timer

IndexValueChange 
Composite$7,307.0028.00% increase
Energy$8,544.0033.00% increase
Financial$7,495.0027.00% increase
Health care$5,668.0030.00% increase
  • Demo Configurator
Timer Interval3 seconds

The example here illustrates how to AJAX-enable the standard MS Timer control with RadAjaxManager. Note that you cannot add the Timer control directly to the AJAX settings as an updated control. Instead, you need to wrap the timer in a container like ASP:Panel and set the container as the updated control.

The example also demonstrates continuous update of RadGrid per certain interval. This however can be achieved by binding the Grid client or server-side through Web Service. See the articles in the Related Resources tab for additional information.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.AjaxManager.ApplicationScenarios.AjaxifyTimer.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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" />
    <div class="qsf-demo-container">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Timer1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="DropDownList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="Panel2"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>

        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server"
            OnItemDataBound="RadGrid1_ItemDataBound"
            OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="Change" TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="Index" HeaderText="Index" UniqueName="Index">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Value" HeaderText="Value" DataFormatString="{0:C2}"
                        UniqueName="Value">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Change" HeaderText="Change" DataFormatString="{0:P2}"
                        UniqueName="Change">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn">
                        <HeaderStyle Width="40px"></HeaderStyle>
                        <ItemTemplate>
                            <asp:Image ID="Image1" AlternateText="progress" runat="server"></asp:Image>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

        <asp:Panel ID="Panel1" runat="server">
            <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
            </asp:Timer>
        </asp:Panel>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <qsf:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" Label="Timer Interval" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Size="Medium">
                        <Items>
                            <telerik:DropDownListItem Text="2 seconds" Value="2000"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="3 seconds" Value="3000" Selected="True"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="5 seconds" Value="5000"></telerik:DropDownListItem>
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance