Access Telerik Controls on Client-Side

Description

When a control is placed within a Content Page, Template or another container which implements INamingContainer interface, its UniqueID and ClientID are modified, thus making it inaccessible on main Page level. The problem is similar when using server-side expressions like <%=txtTrackingNumber.ClientID%> in external JavaScript files, which are not allowed.

Solution

While on server-side you can use the FindControl method to access any control in such cases, on client-side it is important to note the difference between the regular HTML element rendered for the specific control and its own Telerik object representation. You will need to get the Telerik instance of the control in order to leverage its built-in API using one of the following approaches:

1. Find the control using the findControl or findElement methods:
   

var textBox = $telerik.findControl(document.documentElement, "txtTrackingNumber");

The first argument here is the container element and the second one is the original ID of the control. The findControl and findElement methods are used for Telerik and regular HTML elements respectively.
2. Use the client-side event handlers of the Telerik controls to get a reference to their objects:

<telerik:RadButton ... OnClientLoad="buttonLoad">

var button;

function buttonLoad(sender, args) {
    button = sender;
}

1. Access the control directly using the $find() method.

This method requires the exact ClientID generated for the control. You can acquire it by getting the matching HTML element using jQuery or some other way and then use its id attribute to pass it as the argument.

See Also

• Get Client-side Reference to a Control Object.