Exclude Controls from Ajaxifying
Environment
Product | Progress® 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:
-
(Available as of Q1 2016) Use the
PostBackControls
property. -
Use the
RegisterPostBackControl
method of the ScriptManager. -
Disable AJAX with the
OnRequestStart
event in the AjaxPanel and AjaxManager.
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.
<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.
<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>
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.
<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
-
Implement the
realPostBack
function into youraspx
orascx
file. -
Add a custom
OnClick
attribute to the control, in this case, the Button.
<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).
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:
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
.
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));
}