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

AjaxManager Client-side APIs Overview

Overview of the Client-side APIs exposed by the Telerik Web Forms AjaxManager component.

Get client-side reference
Properties
Methods
Events
Tips

Check out the online demo at Client-side API demo.

Get client-side reference

Depending on the JS coding style and libraries you use, there are different ways to get reference to the Telerik.Web.UI.RadAjaxManager Object.

Example

JavaScript

function myFunction(arguments) {
	// Using the $find() method
	var ajaxManager1 = $find("<%= RadAjaxManager1.ClientID %>");
	
	// Using the $telerik.findControl() method
	var ajaxManager2 = $telerik.fondControl(document, 'RadAjaxManager1');
	// OR 
	var ajaxManager3 = $telerik.fondControl(document, '<%= RadAjaxManager.UniqueID %>');

	// Using jQuery
	var ajaxManager4 = $('[id$=RadAjaxManager1]')[0].control;

	// Using document.querySelector()
	var ajaxManager5 = document.querySelector('[id$=RadAjaxManager1]').control;

	// Using document.getElementById()
	var ajaxManager6 = document.getElementById('<%= RadAjaxManager.ClientID %>').control;
}

Properties

Name	Parameters	Return Type	Description
`get_ajaxSettings()`	none	`array` of objects	Returns an array of settings where each object has properties for the `InitControlID` and another array of `UpdatedControls`.
`set_ajaxSettings()`	`array` of objects	none	Sets the array of objects representing the `AjaxSettings`.
`get_defaultLoadingPanelID()`	none	`string`	Returns the `DefaultLoadingPanelID`.
`set_defaultLoadingPanelID()`	`string`	none	Sets the `DefaultLoadingPanelID`.
`get_enableAJAX()`	none	`boolean`	`true` if AJAX is enabled.
`set_enableAJAX()`	`boolean`	none	Enables or disable AJAX for the AJAX initiator. Pass `true` to enable AJAX, or `false` to have the subsequent requests performed as standard postbacks.
`get_enableHistory()`	none	`boolean`	`true` if the browser history is enabled during AJAX requests.
`set_enableHistory()`	`boolean`	none	Allows the browser history during AJAX requests. Pass `true` to allow browser history during AJAX requests.

Methods

Name	Parameters	Return Type	Description
`ajaxRequest()`	`string`	none	Initiates an AJAX request that fires the `AjaxRequest` event on the server.
`ajaxRequestWithTarget()`	`string`, `string`	none	Simulates a PostBack/AJAX request initiated from a control with a specified `UniqueID`.

Events

The AjaxManager and the AjaxPanel both descend from the RadAjaxControl instance.

The RadAjaxControl introduces the AjaxClientEvents property that contains the following events

Name	Description
RequestStart	The `RequestStart` client-side event handler is called when a request to the server is started.
ResponseEnd	The `ResponseEnd` client-side event handler is called when a request is received from the server. The event can not be cancelled.

To use these events, write a JavaScript function that can be called when the event occurs. Then, assign the name of the JavaScript function as the value for the corresponding event.

Example

ASP.NET

<script type="text/javascript">
	function requestStart(sender, eventArgs) {
		alert('Request start');
	}
	function responseEnd(sender, eventArgs) {
		alert('Response complete');
	}
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
	<ClientEvents OnRequestStart="requestStart" OnResponseEnd="responseEnd" />
</telerik:RadAjaxManager>

Tips

The AjaxManager and AjaxPanel requires all <script> elements that contain ASP.NET inline expressions to be wrapped inside RadCodeBlock or RadScriptBlock containers.

Example

ASP.NET

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script>
		function InitiateAjaxRequest(arguments) {
			// ASP.NET Inline expression referencing the AjaxManager
			var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

			// ASP.NET Inline expression getting the current date from the server
			var currentDate = "<%= DateTime.Now.ToString() %>";
		}
    </script>
</telerik:RadScriptBlock>

When an AJAX request is triggered using ajaxRequest() method, the event initiator is the AjaxManager itself and it has to be set as the AjaxControl updating the corresponding control.

Example

ASP.NET
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
<telerik:RadButton runat="server" ID="RadButton1" Text="Update Label With TextBox Value" AutoPostBack="false" OnClientClicked="makeAjaxRequest" />
<asp:Label ID="Label1" runat="server"></asp:Label>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script>
        function makeAjaxRequest(sender, args) {
            // Access the textbox
            var radTextBox = $find("<%= RadTextBox1.ClientID %>");

            // Get the Textbox text
            var text = radTextBox.get_value();

            // Access the AjaxManager
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

            // Make an AJAX request and pass along the text as argument
            ajaxManager.ajaxRequest(text);
        }
    </script>
</telerik:RadScriptBlock>
C#
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (string.IsNullOrEmpty(e.Argument)) return;

    Label1.Text += string.Format("RadTextBox Value: {0}</br>", e.Argument);
}
VB
Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)
    If String.IsNullOrEmpty(e.Argument) Then Return

    Label1.Text &= String.Format("RadTextBox Value: {0}</br>", e.Argument)
End Sub

AjaxManager Client-side APIs Overview

Get client-side reference

Properties

Methods

Events

Tips

See Also