AJAX Panel  is one of the two major controls of the Telerik RadAjax suite. The other one is AJAX Manager. The AJAX Panel control provides the easiest way to AJAX-enable ASP.NET web control(s). To do this you simply need to place the controls that you want ajaxified into  AJAX Panel and Telerik RadAjax takes care of the rest. Best of all this happens transparently to the framework and the controls that are being ajaxified.

The main features of AJAX Panel are:

• Ajaxifies 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

AJAX Panel Usage

All you need to do is to drag the control you want to make callbacks into the AJAX Panel. Then it will start performing callbacks instead of postbacks. On the image below you see a typical usage scenario. A standard ASP.NET control (calendar in this case) is placed in an AJAX Panel. On the web form there is also a Loading Panel that will be shown in the place of the AJAX Panel during the AJAX request.

Out-of-Panel Update

There are cases when you may want to update the information inside the panel by triggering a callback externally from other control on the page. You need to make a call to the <%RadAjaxPanel1.ClientID%>.AjaxRequest() method (passing the necessary information as parameters to it) and then override the RaisePostBackEvent method to apply the changes. Here is a sample implementation, which changes the background color of the panel:

ASPX/ASCX	Copy Code
<rad:RadAjaxPanel id="RadAjaxPanel1" runat="server"        EnableAJAX= "True">     </rad:RadAjaxPanel>     <br />     <input type=button value="Change color" onclick='<%=RadAjaxPanel1.ClientID%>.AjaxRequestWithTarget( "<%= RadAjaxPanel1.UniqueID %>", "ChangeColor")' />

And in the code-behind:

C#	Copy Code
protected override void RaisePostBackEvent(IPostBackEventHandler source, String eventArgument) {  base.RaisePostBackEvent(source, eventArgument);   switch(eventArgument)   {    case "ChangeColor":     RadAjaxPanel1.BackColor = Color.Maroon;    break;   } }

VB.NET	Copy Code
Protected Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)     MyBase.RaisePostBackEvent(source, eventArgument)     Select Case eventArgument           Case "ChangeColor"            RadAjaxPanel1.BackColor = Color.Maroon     End Select End Sub

Exclude controls from ajaxifying

As the AjaxPanel ajaxifies all controls unconditionally, if you want to exclude a control you can use the following approach: implement the realPostBack function into your ASPX/ASCX file and add a custom OnClick attribute to the control (button in this case).

javascript	Copy Code
<script type="text/javascript">  function realPostBack(eventTarget, eventArgument)  {    __doPostBack(eventTarget, eventArgument);  } </script>

ASPX/ASCX	Copy Code
<rad:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></rad:RadAjaxPanel>

And in the code-behind, in Page_Load: 

C#	Copy Code
if (!Page.IsPostBack) {    Button1.Attributes.Add( "onclick", string.Format("realPostBack(\"{0}\", \"\"); return false;", Button1.UniqueID)); }

VB.NET	Copy Code
If Not Page.IsPostBack Then  Button1.Attributes.Add("onclick", String.Format("realPostBack(""{0}"", """"); return false;", Button1.UniqueID)) End If

If you do not have a control that registers the __doPostBack function on the page you can add the following line in the Page_Load as well:

C#	Copy Code
this.Page.ClientScript.GetPostBackEventReference(this, "");

VB.NET	Copy Code
Me.Page.ClientScript.GetPostBackEventReference(Me, "")

AjaxRequestWithTarget() reference

You can make any external control to force AJAX Panel perform an AJAX request by calling this client-side function. When using this function the event target defaults to the RadAjaxPanel instance. 

You can construct the javascript function calls manually or alternatively use the server-side method GetAjaxEventReference and have Telerik RadAjax generate the necessary code for you.

AjaxRequest() reference:

When either of these functions is is called on the client it can be handled in the AjaxRequest event handler on the server.

See Also

© 2002-2008 Telerik. All Rights Reserved.