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

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>

See Also

In this article