Telerik UI for Windows 8 HTML

When you access a control using the winControl property on a control wrapper element, Intellisense is unable to determine the type of the control and cannot display a list of its properties and methods. To be able to use IntelliSense with Telerik Controls, from Q2 2013 on, there are two new helper method collections exposed by the Telerik.UI namespace—find that is a group of methods that find a control of a given type, instantiated on an element matching a supplied selector; and to that is also a group of methods that return the passed object, cast to their corresponding type. The following sections clarify the usage of the two groups of methods.

Using Telerik.UI.find.[ControlName] methods

This is a collection of methods for accessing the different control types directly. For example, if you want to access a RadChart control, you should use the Telerik.UI.find.Chart(selector, element) method. To access RadSlideHubTile, you would only need to replace Chart with SlideHubTile.

These helper methods are especially useful in single page navigation (Navigation template). There, while you are in the ready event handler, you should only access elements inside the element argument (passed to the ready method). In this scenario, it is very easy to get a reference to a Telerik control with working IntelliSense, using a single line of code:

JavaScript Copy imageCopy
ready: function (element, options) {
var chart = Telerik.UI.find.Chart("#chart1", element);
chart.redraw();
}

Using Telerik.UI.to.[ControlName] methods

Similar to the above, Telerik.UI.to is a group of methods, one per each control class in the suite. They are used to "cast" a control, accessed through the winControl expando property, to the proper type, so that you can use IntelliSense with it. For example, consider you have the following definition in HTML:

HTML Copy imageCopy
<div id="calendar" data-win-control="Telerik.UI.RadCalendar"></div>

Now, you want to apply some changes to RadCalendar. To access it and be able to use IntelliSense, you can use the following code:

JavaScript Copy imageCopy
var calendar = document.querySelector("#calendar").winControl;
calendar = Telerik.UI.to.Calendar(calendar);

If the control was a RadRangeSlider, for example, you would only need to replace Calendar with RangeSlider in the JavaScript logic.