Assign Different Client Events for Different Controls with the AjaxManager or AjaxPanel
Environment
| Product | Progress® Telerik® UI for ASP.NET AJAX AjaxManager | Progress® Telerik® UI for ASP.NET AJAX AjaxPanel |
Description
How can I assign different client-events to different AJAX-enabled controls with the Telerik UI for ASP.NET AjaxManager or AjaxPanel?
Solution
The following example demonstrates how to achieve the desired scenario by determining the target control of the AJAX request with the client-side events of the AjaxManager. As a result, the DropDownList and the Button will have different client-events although they are using the same AjaxManager or AjaxPanel.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Button1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Label1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="DropDownList1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Label1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
<ClientEvents OnRequestStart="Start" OnResponseEnd="End" />
</telerik:RadAjaxManager>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>111</asp:ListItem>
<asp:ListItem>222</asp:ListItem>
</asp:DropDownList>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function Start(sender, arguments) {
if (arguments.EventTarget == "<%= Button1.UniqueID %>") {
alert("StartButton");
}
if (arguments.EventTarget == "<%= DropDownList1.UniqueID %>") {
alert("StartDropdown");
}
}
function End(sender, arguments) {
if (arguments.EventTarget == "<%= Button1.UniqueID %>") {
alert("EndButton");
} if (arguments.EventTarget == "<%= DropDownList1.UniqueID %>") {
alert("EndDropdown");
}
}
</script>
</telerik:RadCodeBlock>