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

WebForms AjaxPanel Overview



Received  
 ReceivedFromFolder nameSize
123
 Item 1 to 20 of 52
Page:
of 3 Page size:
Received from date: Sunday, March 28, 2010
  3/28/2010EWarner@web.comDrafts2
  3/28/2010NBullard@web.comDeleted Items8
  3/28/2010SWard@web.comDeleted Items65
  3/28/2010GTomlinson@web.comDrafts6
  3/28/2010TSholl@web.comDeleted Items9
Received from date: Saturday, March 27, 2010
  3/27/2010FDuncan@web.comDeleted Items54
  3/27/2010KAnn@web.comDrafts2
  3/27/2010LSanborn@web.comDrafts87
  3/27/2010SBonner@web.comDeleted Items4378
  3/27/2010JGreenawalt@web.comJunk E-mail5678
  3/27/2010CCox@web.comJunk E-mail234
  3/27/2010EOmara@web.comJunk E-mail5
Received from date: Friday, March 26, 2010
  3/26/2010ARodacker@web.comInbox856
  3/26/2010FHeckendora@web.comJunk E-mail3
  3/26/2010ACatherina@web.comInbox3
  3/26/2010ISaline@web.comInbox23
  3/26/2010BAtkinson@web.comOutbox5
  3/26/2010JQueer@web.comSent Items89
  3/26/2010CPeters@web.comInbox23
  3/26/2010BNehling@web.comOutbox645

This example illustrates how easy it is to AJAX-enable an ASP.NET control. By simply wrapping a standard (or custom) control in a RadAjaxPanel, all postbacks that it performs will be converted to AJAX requests without writing a single line of code. All events handlers, viewstate and form data are preserved and the page lifecycle goes on as normal. By switching on/off the AJAX you can see how the Grid works when it is AJAX-enabled and when you disable the AJAX by setting EnableAjax property of RadAjaxPanel to false.

About RadAjaxPanel for ASP.NET AJAX

RadAjaxPanel provides the easiest way to Ajax-enable ASP.NET web controls. You simply need to place the controls that you want Ajax-enabled into a RadAjaxPanel and Telerik RadAjax takes care of the rest. Best of all, this happens transparently to the framework and the controls that are being Ajax-enabled.

Key Features

  • Ajax-enables all controls inside that normally work with postbacks
  • Defines visually and codeless (in Visual Studio design-time) which elements should be updated via AJAX requests. All elements wrapped in the panel will be updated via AJAX.
  • No need to modify your application logic
  • Allows you to update a number of page elements at once
  • No need to write any JavaScript or invoke AJAX requests manually
More about RadAjaxPanel
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.AjaxPanel.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>
</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">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <div>
                <asp:CheckBox ID="chkEnableAjax" runat="server" Checked="true" AutoPostBack="true"
                    OnCheckedChanged="chkEnableAjax_CheckedChanged"></asp:CheckBox>
                <asp:Label ID="Label1" runat="server" AssociatedControlID="chkEnableAjax">Switch on/off the Ajax of the RadAjaxPanel</asp:Label>
            </div>
            <br />
            <br />
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" PageSize="20"
                AllowSorting="True" AllowMultiRowSelection="True" AllowPaging="True" ShowGroupPanel="True"
                AutoGenerateColumns="False" GridLines="none">
                <PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>
                <MasterTableView Width="100%">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="Received" FieldName="Received" FormatString="{0:D}"
                                    HeaderValueSeparator=" from date: "></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Received" SortOrder="Descending"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="Received" HeaderText="Received" HeaderButtonType="TextButton"
                            DataField="Received" DataFormatString="{0:d}">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="From" HeaderText="From" HeaderButtonType="TextButton"
                            DataField="From">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="FolderName" HeaderText="Folder name" HeaderButtonType="TextButton"
                            DataField="FolderName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Size" HeaderText="Size" HeaderButtonType="TextButton"
                            DataField="Size">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">
                    <Selecting AllowRowSelect="True"></Selecting>
                    <Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True"
                        ResizeGridOnColumnResize="False"></Resizing>
                </ClientSettings>
                <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Mails" runat="server"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance