ASP.NET AJAX : Ways to access controls in client-side

See:
https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference

Get Client-side Reference to a Control Object

This article shows how to get a client-side reference to a Telerik® UI for ASP.NET AJAX control and use its client-side API.

You can quickly navigate through the sections from here:

• Using the MS AJAX Approach
• Using Plain JavaScript Methods
• Using jQuery Selectors
• Using Telerik Methods
• Important MS AJAX Events

The UI for ASP.NET AJAX controls are created by implementing the IScriptControl interface and have the lifecycle of MS AJAX-based controls. Thus, they are initialized during the Sys.Application.init event and the instance of the control can be accessed during the Sys.Application.load event at the earliest. You can see how in the Important MS AJAX Events section.

Using the MS AJAX Approach

MS AJAX exposes the Sys.Application.findComponent method that enables you to get the client-side reference of an MS AJAX-based control in the client via JavaScript. You can also use its shortcut—$find()—as shown in Example 1.

Example 1: Using the $find method to get the control's client-side reference.

• ASP.NET

<telerik:RadPushButton runat="server" ID="RadButton1" Text="Button" OnClientClicked="showRadWindow" AutoPostBack="false" />

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <p>Some content.</p>
    </ContentTemplate>
</telerik:RadWindow>

<script>
    function showRadWindow(sender, args) {
        var radWindow = $find("<%= RadWindow1.ClientID %>");
        radWindow.show();
    }
</script>

Using Plain JavaScript Methods

Typically, when an MS AJAX-based control (like the ones from the UI for ASP.NET AJAX suite) renders on the client, its client-side reference is assigned to the wrapper DOM element and exposed through the control property.

This means you can use the MS AJAX $get() or the native document.getElementById() methods and get the instance via the control property. See Example 2 and Example 3.

We recommend you use server-side scripting tags and get the dynamically created client ID of the control (<%= [ControlID].ClientID %>). If, however, you do not have access to the server-side instance of the control, see the options in the Using jQuery Selectors section.

Example 2: Using the getElementById method to get the control's client-side reference.

• ASP.NET

<telerik:RadPushButton runat="server" ID="RadButton1" Text="Button" OnClientClicked="showRadWindow" AutoPostBack="false" />

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <p>Some content.</p>
    </ContentTemplate>
</telerik:RadWindow>

<script>
    function showRadWindow(sender, args) {
        var radWindow = document.getElementById("<%= RadWindow1.ClientID %>").control;
        radWindow.show();
    }
</script>

Example 3: Using the $get method to get the control's client-side reference.

• ASP.NET

<telerik:RadPushButton runat="server" ID="RadButton1" Text="Button" OnClientClicked="showRadWindow" AutoPostBack="false" />

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <p>Some content.</p>
    </ContentTemplate>
</telerik:RadWindow>

<script>
    function showRadWindow(sender, args) {
        var radWindow = $get("<%= RadWindow1.ClientID %>").control;
        radWindow.show();
    }
</script>

Using jQuery Selectors

Often controls are added via user controls, content templates and other similar techniques, or you need to access the reference in a script file (where server-side scripting is not possible). In such scenarios, IDs are generated dynamically and getting the client-side reference from master or parent pages cannot be done by accessing the ClientID property of the control's server-side instance.

With the help of the included jQuery, you can use the attributeEndsWith selector to get the DOM element and access the client-side instance even by using the server-side ID only.

If the same server-side ID is used with multiple controls, jQuery will return all elements that match the same ending value. You should handle scenarios like this according to the exact requirements and scenario.

Example 4: Using the attributeEndsWith selector to get the client-side instance of a control.

• ASP.NET

<telerik:RadPushButton runat="server" ID="RadButton1" Text="Button" OnClientClicked="showRadWindow" AutoPostBack="false" />

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <p>Some content.</p>
    </ContentTemplate>
</telerik:RadWindow>

<script>
    function showRadWindow(sender, args) {
        var radWindow = $telerik.$("[id$='RadWindow1']").get(0).control;
        radWindow.show();
    }
</script>

You can use other selectors for the ID (e.g., contains), or you can even use the CSS class where you can assign to a control or its parent to build the desired jQuery selector.

Using Telerik Methods

You can also use the $telerik.findControl() method that is exposed in the Telerik Static Client Library.

Example 5: Using the $telerik.findControl method to get the control's client-side reference.

• ASP.NET

<telerik:RadPushButton runat="server" ID="RadButton1" Text="Button" OnClientClicked="showRadWindow" AutoPostBack="false" />

<asp:Panel runat="server" ID="Panel1">
    <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
        <ContentTemplate>
            <p>Some content.</p>
        </ContentTemplate>
    </telerik:RadWindow>
</asp:Panel>

<script>
    function showRadWindow(sender, args) {
        var parentElement = $get("<%= Panel1.ClientID%>");
        var radWindow = $telerik.findControl(parentElement, "<%= RadWindow1.ClientID %>");
        radWindow.show();
    }
</script>

Important MS AJAX Events

The client-side instances of the Telerik® UI for ASP.NET AJAX controls are initialized after their scripts are loaded (after Sys.Application.init). The earliest event that you can use to reference the client-side instance of a control is the Sys.Application.load event.

Example 6: Using the Sys.Application.load event to get the instance.

• ASP.NET

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <p>Some content.</p>
    </ContentTemplate>
</telerik:RadWindow>

<script>
    Sys.Application.add_load(showRadWindow)

    function showRadWindow() {
        var radWindow = $find("<%= RadWindow1.ClientID %>");
        radWindow.show();
    }
</script>

Example 7: Using server-side techniques to interact with a control's client-side instances.

• ASP.NET

<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <p>Some content.</p>
    </ContentTemplate>
</telerik:RadWindow>

• C#
• VB

protected void Page_Load(object sender, EventArgs e)
{
    string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
}

Using native DOM events (like window.load or jQuery's $(document).ready may not give you the expected results. Such events are usualy prior to the Sys.Application.load event and cannot guarantee that the control instances are initialized.