Access Telerik Controls on Client-Side

RELATED TO:

AUTHOR: Eyup Yusein

DATE POSTED: January 01, 2018

 
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 JS 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">
JavaScript:
var button;
function buttonLoad(sender, args) {
    button = sender;
}

3. 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.

ADDITIONAL RESOURCES
You can find more information in the following help article: Get Client-side Reference to a Control Object.

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Videos

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.