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

WebForms AjaxManager Overview

  • Calendar
May 2006
May 2006
SMTWTFS
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
  • Inbox
 FromSubject
Kilgore TroutNew Appointments
Brian GriffinPaperclips
Glen QuagmireNew Office Rules
  • Messages
 Dear Sir, Your appointments have been updated and a copy of your schedule is waiting for you on your desk.

This example illustrates how to use RadAjaxManager to enable complex update relationships between web controls with AJAX. In this particular organizer application there are two controls that can initiate an AJAX request: Calendar and Grid.

When the user selects a date from the calendar, this will cause two controls to be updated:
1) The grid that lists the email messages received
2) The MS DetailsView control that displays the text of the current message

When the user selects a message from the Grid control, this will cause the Details View control to be updated with the text of the correct message.

About RadAjaxManager for ASP.NET AJAX

Telerik RadAjaxManager for ASP.NET AJAX provides a universal, cross-browser approach for creating highly-interactive applications. The patent-pending Click-and-Go™ technology allows developers to AJAX-enable any ASP.NET application without making any modifications (placing update panels, setting triggers, etc.) and without writing a single line of JavaScript or server-side code.

RadAjaxManager 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.

Key Features

  • Telerik RadAjaxManager uses the Microsoft ASP.NET AJAX engine for codeless configuration of AJAX relations.
  • Using RadAjax does not limit the AJAX application to handle the Back/Forward buttons and browser History.
  • RadAjaxManager control replaces postbacks automatically.
  • RadAjaxManager supports standard and third-party controls.
  • You can add RadAjaxManager with a simple drag & drop and eliminate the need of placing UpdatePanel controls, set triggers, etc.
  • The control is suitable for complex applications.
More about RadAjaxManager
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.AjaxManager.Overview.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>
    <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" />
    <div class="demo-container size-wide">
            <div class="organizerContainer">
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                    <script type="text/javascript" src="scripts.js"></script>
                </telerik:RadCodeBlock>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="EmailGrid" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="MessageBody" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="EmailGrid">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="EmailGrid"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="MessageBody" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadSplitter RenderMode="Lightweight" ID="MainSplitter" runat="server" Orientation="Horizontal" CssClass="autoSize mainSplitter">
                    <telerik:RadPane ID="NestedSplitterPane" runat="server" Scrolling="None" CssClass="autoSize">
                        <telerik:RadSplitter RenderMode="Lightweight" ID="NestedSplitter" runat="server" Orientation="Vertical" CssClass="autoSize">
                            <telerik:RadPane ID="CalendarPane" runat="server" Scrolling="None"  CssClass="autoSize">
                                <telerik:RadToolBar RenderMode="Lightweight" ID="CalendarToolbar" runat="server" Width="100%">
                                    <Items>
                                        <telerik:RadToolBarButton Text="Calendar"  Font-Size="18px"  Enabled="false">
                                        </telerik:RadToolBarButton>
                                    </Items>
                                </telerik:RadToolBar>
                                <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" DayNameFormat="FirstLetter" ShowRowHeaders="false"
                                    FocusedDate="2006/05/01" OnDayRender="RadCalendar1_DayRender" OnSelectionChanged="RadCalendar1_SelectionChanged"
                                    EnableMultiSelect="false" AutoPostBack="true" UseColumnHeadersAsSelectors="false"
                                    UseRowHeadersAsSelectors="false">
                                    <ClientEvents OnDateClick="dateClick"></ClientEvents>
                                </telerik:RadCalendar>
                            </telerik:RadPane>
                            <telerik:RadPane ID="GridPane" runat="server" Scrolling="None"  CssClass="autoSize">
                                <telerik:RadToolBar RenderMode="Lightweight" ID="GridToolbar" runat="server" Width="100%">
                                    <Items>
                                        <telerik:RadToolBarButton Text="Inbox"  Font-Size="18px" Enabled="false">
                                        </telerik:RadToolBarButton>
                                    </Items>
                                </telerik:RadToolBar>
                                <telerik:RadGrid RenderMode="Lightweight" ID="EmailGrid" DataSourceID="SqlDataSource1" runat="server" Height="100%" CellPadding="0" AutoGenerateColumns="False" CssClass="emailGrid">
                                    <MasterTableView DataKeyNames="id" Width="100%">
                                        <Columns>
                                            <telerik:GridTemplateColumn HeaderStyle-Width="20px">
                                                <ItemTemplate>
                                                    <img src="images/mailRead<%# Eval("read") %>.gif" class="mailStatusImage" alt="" />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn DataField="name" HeaderText="From" UniqueName="Name" HeaderStyle-Width="150px"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="subject" HeaderText="Subject" UniqueName="Subject" HeaderStyle-Width="300px"></telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                    <ClientSettings EnablePostBackOnRowClick="true">
                                        <Selecting AllowRowSelect="true"></Selecting>
                                    </ClientSettings>
                                </telerik:RadGrid>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadPane ID="MessagePane" runat="server" Scrolling="None" CssClass="autoSize">
                        <telerik:RadToolBar RenderMode="Lightweight" ID="MessageToolbar" runat="server" Width="100%">
                            <Items>
                                <telerik:RadToolBarButton Text="Messages"  Font-Size="18px" Enabled="false">
                                </telerik:RadToolBarButton>
                            </Items>
                        </telerik:RadToolBar>
                        <asp:DetailsView ID="MessageBody" runat="server" DataSourceID="SqlDataSource2" Font-Size="14px"
                            Width="100%" Height="80px" AutoGenerateRows="false" GridLines="None">
                            <Fields>
                                <asp:BoundField DataField="Body" HeaderText=""></asp:BoundField>
                            </Fields>
                        </asp:DetailsView>
                    </telerik:RadPane>
                </telerik:RadSplitter>

                <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                    SelectCommand="SELECT * FROM [email] WHERE ([date] = @date)">
                    <SelectParameters>
                        <asp:Parameter DefaultValue="2006-05-30" Name="date" Type="DateTime"></asp:Parameter>
                    </SelectParameters>
                </asp:SqlDataSource>
                <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                    runat="server" SelectCommand="SELECT [body] FROM [email] WHERE (([date] = @date) AND ([ID] = @ID))">
                    <SelectParameters>
                        <asp:Parameter DefaultValue="2006-05-30" Name="date" Type="DateTime"></asp:Parameter>
                        <asp:ControlParameter ControlID="EmailGrid" DefaultValue="" Name="ID" PropertyName="SelectedValue"
                            Type="Int32"></asp:ControlParameter>
                    </SelectParameters>
                </asp:SqlDataSource>
            </div>
        </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance