All you need to do is to drag the control you want to make callbacks into the RadAjaxPanel. 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 RadAjaxPanel. On the web form there is also a Loading Panel that will be shown in the place of the RadAjaxPanel during the AJAX request.

Caution

Note that the whole RadAjaxPanel (with ALL controls inside) is updated when one of the controls makes an AJAX request. Thus if you put the whole page into a RadAjaxPanel, this may cause reduced performance, as all controls within the panel will be updated, not just the AJAX initiator.Placing the whole page into a RadAjaxPanel is usable when you have relatively small number of controls on the page.

Out-of-Panel Update

The following approach is not recommended as RadAjaxManager can handle any complex scenarios. You can just use ASP:Panel controls for example and link them via manager's settings. One and the same panel may be set as AJAX Initiator and updated control, which will cause the same as RadAjaxPanel functionality.

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 $find(<%RadAjaxPanel1.ClientID%>).ajaxRequest() method (passing the necessary information as parameters to it) and then override the RaisePostBackEvent method or handle the RadAjaxPanel AjaxRequest server-side event to apply the changes. Here is a sample implementation, which changes the background color of the panel:

CopyASPX

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">
</telerik:RadAjaxPanel>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function invokeAjaxrequest() {
            $find("<%= RadAjaxPanel1.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel1.UniqueID %>", "ChangeColor");
        }
    </script>
</telerik:RadCodeBlock>
<input type="button" value="Change color" onclick="invokeAjaxRequest();" />

And in the code-behind:

• C#
• VB.NET

CopyC#

protected void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    switch (e.Argument)
    {
        case "ChangeColor":
            RadAjaxPanel1.BackColor = System.Drawing.Color.Maroon;
            break;
        default:
            break;
    }
}

CopyVB.NET

Protected Sub RadAjaxPanel1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
    Select Case e.Argument
        Case "ChangeColor"
            RadAjaxPanel1.BackColor = System.Drawing.Color.Maroon
    End Select
End Sub

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

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

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

Other Resources