Check it out: Live Telerik UI for ASP.NET AJAX & all .NET Web Products Release Webinar on Tuesday 26 | 11 AM ET.
Telerik UI for ASP.NET AJAX is professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
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.
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 90+ 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="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxManager.Overview.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" /> <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>