New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Exclude Controls from Ajaxifying

Environment

ProductProgress® Telerik® UI for ASP.NET AJAX

Description

How can I exclude a control from being AJAX-enabled in the AjaxManager?

Solution

By default, the AjaxManager AJAX-enables all controls placed inside. To exclude a control from this logic, use any of the following approaches:

Using the PostBackControls Property

As of the Q1 2016 release, a new PostBackControls property is exposed for the AjaxManager and AjaxPanel controls. PostBackControls accepts a collection of control IDs which will automatically make those controls postback triggers.

ASP.NET
 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
 </telerik:RadScriptManager>
 <telerik:RadAjaxPanel ID="RadAjaxPanel1"  PostBackControls="Button2,Button3" runat="server">
	 <asp:Button runat="server" ID="Button1" Text="Ajax" OnClick="Button_Click" />
	 <asp:Button runat="server" ID="Button2" Text="Postback" OnClick="Button_Click" />
     <asp:Button runat="server" ID="Button3" Text="Postback" OnClick="Button_Click" />
	 <asp:Label ID="Label1" runat="server"></asp:Label>
 /telerik:RadAjaxPanel>

Using the RegisterPostBackControl Method

The following example demonstrates how to use the RegisterPostBackControl method of the ScriptManager. Note that this approach is not applicable when the page is AJAX-enabled with the AjaxManager.

ASP.NET
 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
 </telerik:RadScriptManager>
 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
	 <asp:Button runat="server" ID="Button1" Text="Ajax" OnClick="Button_Click" />
	 <asp:Button runat="server" ID="Button2" Text="Postback" OnClick="Button_Click" />
	 <asp:Label ID="Label1" runat="server"></asp:Label>
 /telerik:RadAjaxPanel>
C#

protected void Page_Load(object sender, EventArgs e)
	{
	     RadScriptManager1.RegisterPostBackControl(Button2);
	}
protected void Button_Click(object sender, EventArgs e)
	{
	    Label1.Text = DateTime.Now.ToLongTimeString();
	}

Disabling AJAX with the OnRequestStart Event

To determine the AJAX initiator and disable AJAX for the current request, use the OnRequestStart client-side event handler. The event is fired on each request so on the next request, the same check will be performed. A similar implementation is often used when exporting from an AJAX-enabled Grid.

All controls that are added in the UpdatedControls collection of the AjaxManager AJAX settings will perform a callback instead of a postback. To exclude them from ajaxifying, use the previous approach.

Cancelling the AJAX Request on the InitializeRequest Event

This approach is suitable for cancelling the AJAX request in a wide range of scenarios. Unlike the OnRequestStart event, the InitializeRequest event will be triggered for both Telerik AjaxManager and AjaxPanel controls, and the ASP.NET UpdatePanel AJAX controls.

The following example demonstrates how to add your custom logic by using the instance of the PageRequestManager. Note that you have to replace the CONTROL_ID string with the actual name of the control that triggers the AJAX request.

ASP.NET
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<script type="text/javascript">
	Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initRequest);
	function initRequest(sender, args)
	{
		if (args.get_postBackElement().id.indexOf("CONTROL_ID") != -1)
		{
			args.set_cancel(true);  //stop async request
			sender._form["**EVENTTARGET"].value = args.get_postBackElement().id.replace(/\_/g, "$");
			sender._form["**EVENTARGUMENT"].value = "";
			sender._form.submit();
			return;
		}
	}
</script>

Adding the Postback Function Manually

  1. Implement the realPostBack function into your aspx or ascx file.

  2. Add a custom OnClick attribute to the control, in this case, the Button.

ASP.NET
<telerik:RadCodeBlock ID="codeblock1" runat="server">
<script type="text/javascript">
	function realPostBack(eventTarget, eventArgument)
	{
	    find("<%= RadAjaxPanel1.ClientID %>").**doPostBack(eventTarget, eventArgument);
	}
</script>
</telerik:RadCodeBlock>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
	<asp:LinkButton ID="LinkButton1" runat="server" Text="PostBack"></asp:LinkButton>
	<asp:LinkButton ID="LinkButton2" runat="server" Text="Ajax"></asp:LinkButton>
</telerik:RadAjaxPanel>

The following example demonstrates the code-behind (the Page_Load event handler).

C#
protected void Page_Load(object sender, EventArgs e)
	{
	    if (!Page.IsPostBack)
	    {
	            LinkButton1.Attributes.Add("onclick", string.Format("realPostBack(\"{0}\", \"\"); return false;", LinkButton1.UniqueID));
	    }
	}

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

C#

this.Page.ClientScript.GetPostBackEventReference(this, "");

This will come in handy when you want a single control to perform the postback for your scenario or if you want to upload files from a control in the AjaxPanel.

Excluding Loaded Controls Dynamically

If you are loading the user control dynamically, the if (!Page.IsPostBack) code in the Page_Load event handler of the previous example will never be executed. You can check for the attached OnClick event instead of the IsPostBack.

C#

protected void Page_Load(object sender, EventArgs e)
	{
	    bool isOnClickAttached = false;
	    IEnumerator keys = this.CheckBox1.Attributes.Keys.GetEnumerator();
	    while (keys.MoveNext())
	    {
	        if (keys.Current.Equals("onClick"))
	        {
	            isOnClickAttached = true;
	             break;
	         }
	    }
	    if (!isOnClickAttached)
	        this.CheckBox1.Attributes.Add("onClick", string.Format("realPostBack(\"{0}\", \"\"); return false;", this.CheckBox1.UniqueID));
	}