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

Client-side API

You can use the RadAjaxManager control or another control that initiates postbacks to initiate your own AJAX requests explicitly on the client. It gives you the ability to add AJAX functionality to controls that are not specially designed to make AJAX requests or mark a server control as an initiator of the AJAX request using the ajaxRequestWithTarget(controlUniqueId, arguments) method.

In this example, you can see integration between a Flash object and the RadAjaxManager and RadListBox controls. When a user clicks upon fixed regions, an AJAX request is made with an argument whose value is the name of the area. The result is a short description of the selected continent or country:

//This method is invoked from the Flash animation.
functionInitiateAsyncRequest(arguments)
 {
    varajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.ajaxRequest(arguments);
 }

When choosing countries from the RadListBox, the ajaxRequestWithTarget method is invoked to display a description for the relevant country in the description area below:

//this method is invoked from the OnClientSelectedIndexChanged event of the RadListBox control
functionRefreshDescription(sender, eventArgs)
{
    varajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.ajaxRequestWithTarget("<%= CountriesListBox.UniqueID %>", sender.get_selectedItem().get_text());
}
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.AjaxManager.ClientSideProgramming.ClientSideAPI.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-medium no-bg">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadListBoxPanel" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CountriesListBox">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Sunset">
        </telerik:RadAjaxLoadingPanel>

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                // this method is invoked from the flash animation
                function InitiateAsyncRequest(argument) {
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest(argument);
                    return false;
                }

                function RefreshDescription(sender, eventArgs) {
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequestWithTarget("<%= CountriesListBox.UniqueID %>", sender.get_selectedItem().get_text());
                }
            </script>
        </telerik:RadCodeBlock>
        <div class="demoMain">
            <ul class="demoUL">
                <li><a id="aEU" href="#" onclick="return InitiateAsyncRequest('Europe');">Europe</a></li>
                <li><a id="aNA" href="#" onclick="return InitiateAsyncRequest('NorthAmerica');">North America</a></li>
                <li><a id="aSA" href="#" onclick="return InitiateAsyncRequest('SouthAmerica');">South America</a></li>
                <li><a id="aAS" href="#" onclick="return InitiateAsyncRequest('Asia');">Asia</a></li>
                <li><a id="aAF" href="#" onclick="return InitiateAsyncRequest('Africa');">Africa</a></li>
                <li><a id="aAU" href="#" onclick="return InitiateAsyncRequest('Australia');">Australia</a></li>
            </ul>
            <asp:Panel ID="RadListBoxPanel" runat="server" CssClass="countryList">
                <h3>
                    <asp:Label ID="lblTitle2" runat="server"></asp:Label>
                </h3>
                <telerik:RadListBox RenderMode="Lightweight" ID="CountriesListBox" runat="server"
                    OnClientSelectedIndexChanged="RefreshDescription"
                    OnSelectedIndexChanged="CountriesListBox_SelectedIndexChanged"
                    Skin="Silk"
                    Visible="false">
                </telerik:RadListBox>
            </asp:Panel>
            <asp:Panel ID="Panel1" runat="server" CssClass="descriptionText">
                <h3>
                    <asp:Label ID="lblTitle" runat="server"></asp:Label>
                </h3>
                <asp:Label ID="lblDescription" runat="server"></asp:Label>
            </asp:Panel>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance