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

Telerik Static Client Library

To facilitate Client-side development with the controls in the Telerik UI suite, Telerik provides a library of static client-side javascript functions. This javascript object is named $telerik. The functions inside make a handy set of tools for tasks related to DOM element traversal and position location, browser detection, object search and others. The $telerik object is loaded into the window object whenever you add a UI control from the Telerik.Web.UI namespace to the page. Alternatively, if you do not use any Telerik control, but have referenced the assembly Telerik.Web.UI and still want to use $telerik, you can manually reference the javascript resource file embedded in the Telerik.Web.UI assembly:

<asp:ScriptManager runat="server" ID="ScriptManager1">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    </Scripts>
</asp:ScriptManager>

The $telerik object provides the following set of static properties for browser detection:

The following table of browser detection flags is superseded by the newer Telerik.Web.Browser flags. You can still use the static methods further down the page.

Name Description
isChrome Returns true if the User Agent is Google Chrome
isFirefox Returns true if the User Agent is any version of Firefox
isFirefox2 Returns true if the User Agent is Firefox 2
isFirefox3 Returns true if the User Agent is Firefox 3
isIE Returns true if the User Agent is Internet Explorer
isIE6 Returns true if the User Agent is Internet Explorer 6
isIE7 Returns true if the User Agent is Internet Explorer 7
isIE8 Returns true if the User Agent is Internet Explorer 8
isIE9 Returns true if the User Agent is Internet Explorer 9
isTrident Returns true if the User Agent is Trident-based
isSpartan Returns true if the User Agent is Spartan-based (Microsoft Edge)
isOpera Returns true if the User Agent is Opera
isOpera11 Returns true if the User Agent is Opera11
isSafari Returns true if the User Agent is any version of Safari
isSafari2 Returns true if the User Agent is Safari 2
isSafari3 Returns true if the User Agent is Safari 3
isSafari4 Returns true if the User Agent is Safari 4
isMobileSafari Returns true if the User Agent is iPhone OS Mobile Safari
isBlackBerry Returns true if the User Agent is BlackBerry
isBlackBerry4 Returns true if the User Agent is BlackBerry 4
isBlackBerry5 Returns true if the User Agent is isBlackBerry 5
isBlackBerry6 Returns true if the User Agent is isBlackBerry 6
isTouchDevice Returns true if the current browser is running on a mobile device that supports touch capabilities
quirksMode Returns true if the browser agent runs in quirks mode (IE only)
standardsMode Returns true if the browser agent runs in standards mode (IE only)

Additionally to browser detection properties, the $telerik object provides the radControls property:

 

Name Description
radControls Returns an array of all client-side objects of Telerik controls if the controls expose client objects

The $telerik object provides the following set of static functions by topic:

 

Name Parameters Return Type Description
Element Styling
addCssClasses removeCssClasses element (HTML DOM element) classNames (Array of class names) none Adds / Removes multiple class names to the DOM element
getCurrentStyle element (DOM element) attribute (String) defaultValue (String) String Gets the current value of the attribute style of the specified element . If the current value is not defined, optionally returns defaultValue
getComputedStyle element (DOM element) attribute (String) defaultValue (String) String Gets the computed value of the attribute style of the specified element . If there's no computed value, optionally returns defaultValue
getPadding element (DOM element) boxSide (Telerik.Web.BoxSide) Integer Returns the padding thickness of element on the given side
getPaddingBox element (DOM element) Object {top, left, bottom, right, horizontal, vertical} Returns the box of padding sizes
getVisible element (DOM element) Boolean Returns true if element is visible, otherwise returns false
setVisible element (DOM element) value (Boolean) none Set the visibility of an element
isBorderVisible element (DOM element) boxSide (Telerik.Web.BoxSide) Boolean Whether the current border style for an element on a specific boxSide is not 'none'.
isRightToLeft element (DOM element) Boolean Returns true if element is in RTL direction, otherwise returns false
mergeElementAttributes source (DOM element) target (DOM element) preserve (Boolean) none Merges the attributes of source to target . If under IE, the optional preserve specifies whether to preserve the identity of target or to allow modification on merging
parseBorderWidth borderWidth (String) Integer Returns integer value of the border width in pixels out of the borderWidth style string
parsePadding padding (String) Integer Returns integer value of padding in pixels out of the padding style string
parseUnit value (String) Object {size, type} Returns an object with unit size and type out of value unit string
registerSkins element (DOM element) none Registers all <link> style tags in element to the page. If no element is provided, all the tags on page are registered
Event Handler Manipulation
addExternalHandler removeExternalHandler element (HTML DOM element) eventName (name of the event, e.g. "mouseover") handler (the event handler function) none Adds / Removes the event handler handler to the element 's eventName event. Can be used when attaching events to HTML elements in IFRAMEs where ASP.NET AJAX's $addHandler and $remoevHandler do not work
cancelRawEvent e (Event object) false Cancels the specified event from propagating
Element Animation
transition element (the DOM element or jQuery object that will be animated) properties (an object of CSS properties and values that the animation will move toward) duration (a string or number determining how long the animation will run) easing (a string indicating which easing function to use for the transition) complete (a function to call once the animation is complete) None Performs a custom animation of a set of CSS properties. See Transition Example.
Element Positioning
containsPoint rect (Rectangle object with properties: x, y, width, height) x (X coordinate of the point) y (Y coordinate of the point) Boolean Checks whether a point with coordinates x and y is contained within a rect . The Rectangle object needs to provide properties: x, y, width, height
elementOverflowsLeft elementOverflowsTop element (HTML DOM element) cachedLocation (Sys.UI.Point object. Optional. If a Point object is specified for this parameter, it will be accepted as the HTML element's current location) Boolean Checks if the specified HTML element overflows the screen with the specified screen size from left or top respectively
elementOverflowsBottom elementOverflowsRight screenSize (screen size object with properties: width, height) element (HTML DOM element) cachedLocation (Sys.UI.Point object. Optional. If a Point object is specified for this parameter, it will be accepted as the HTML element's current location) Boolean Checks if the specified HTML element overflows the screen with the specified screen size from right or bottom respectively
getLocation element (DOM element) Sys.UI.Point {x, y} Returns the absolute location of element in the document
setLocation element (DOM element) point (Object {x, y}) none Sets the location (left, top) of element to point (x, y)
getScrollOffset element (DOM element) recursive (Boolean) Object {x, y} Returns the scroll offset of element from its parent(s). If recursive , return the absolute scroll offset.
isMouseOverElement element (DOM element) event (DOM event) Boolean Returns whether mouse is over element when event fires See also isMouseOverElementEx
isMouseOverElementEx element (DOM element) event (DOM event) Boolean Returns whether mouse is over element when event fires. This method is more sophisticated and it is recommend that you use it instead of isMouseOverElement, which exists for historical reasons.
scrollIntoView element (DOM element) none Scrolls the parent scrollable container to element 's position. An alternative flicker-free implementation to HTMLDomElement.scrollIntoView()
Element Sizing
getBorderBox element (DOM element) Object {top, left, bottom, right, horizontal, vertical} Gets the border box sizes of the specified element
getBorderWidth element (DOM element) boxSide (Telerik.Web.BoxSide) Integer Returns the border width of element on the specified box side
getBounds element (DOM element) Sys.UI.Bounds {x, y, width, height} Gets the coordinates, width and height of the specified element
setBounds element (DOM element) bounds (Object {x, y, width, height} none Sets element 's border-box size to bounds
getClientBounds none Sys.UI.Bounds {x, y, width, height} Gets the width and height of the client browser window, excluding scroll bars. Return object's x and y properties are set to 0.
getContentSize element (DOM element) Object {width, height} Gets the "content-box" size of an element
setContentSize element (DOM element) size (Object {width, height}) none Sets the content-box size of element to size
getDocumentRelativeCursorPosition e (DOM event) Object {left, top} Gets the cursor position of the mouse when event e is fired, relative to the Document
getMargin element (DOM element) boxSide (Telerik.Web.BoxSide) Integer Returns the value of the margin of element on the specified box side
getMarginBox element (DOM element) Object {top, left, bottom, right, horizontal, vertical} Returns the box object with the margin sizes
getOuterBounds element (DOM element) Object {x, y, width, height} Returns the outer bounds of element
getOuterSize element (DOM element) Object {width, height} Returns the outer size of element
getSize element (DOM element) Object {width, height} Returns the size of the element
setSize element (DOM element) value (Object {width, height}) none Sets the border-box size of element to value
getViewPortSize none Object {width, height} Returns the effective size of the client viewport
Element Content Manipulation
getOuterHtml element (DOM element) String Returns the outer HTML text of element (element's innerHTML and the element's own rendered HTML)
repaintChildren parentControl (Object - Telerik control client object) none Repaints all children elements of parentControl 's container element
Telerik controls client object access
findControl parent (HTML DOM element) id (String) Object - client Telerik control object Finds the client-side Telerik control object by provided server-side ID of the control object in the collection of child elements of the parent DOM element
Element Search
findElement parent (HTML DOM element) id (String) HTML DOM element Finds the HTML DOM wrapper element of the Telerik control by provided server-side ID in the collection of child elements of the parent DOM element
getChildByClassName element (parent DOM element) className (CSS class name) index (start index in the collection of child elements) HTML DOM element Returns the first child element of element with the specified className , optionally starting from position index
getChildrenByClassName element (parent DOM element) className (CSS class name) Array Returns an array of all child elements of element with the specified className
getChildrenByTagName element (parent DOM element) tagName (String - tag name) Array Returns an array of all child elements of element with the specified tag name
getElementByClassName element (DOM element) className (String) tagName (String) DOM element Returns the first child element of element with the specified className and optionally of type tagName
getFirstChildByTagName element (DOM element) tagName (String) index (Integer) DOM element Returns the first child of element with the specified tagName , starting from index in the collection of child elements
getPreviousHtmlNode element (DOM element) DOM element Gets the previous non-text HTML sibling of element
getNextHtmlNode element (DOM element) DOM element Gets the next non-text HTML sibling of element
getInvisibleParent element (DOM element) DOM element Returns the closest parent of element that has its display style set to "none", or null if no such parent is found
isDescendant ancestor (DOM element) descendant (DOM element) Boolean Returns whether descendant is a recursive child node of ancestor
isDescendantOrSelf ancestor (DOM element) descendant (DOM element) Boolean Returns whether descendant is the same as ancestor or a recursive child node of ancestor

The "content-box" is the size of the content area inside of the borders and padding of an element. It does not include the margins around the element.

The "border-box" is the size of the content area outside of the borders and padding of an element. It does not include the margins around the element.

Transition Example

<%-- Load manually the Animation framework's scripts if a control is not declared in the markup. --%>
<%-- The Core and jQuery scripts are needed for the Animation framework's scripts --%>
<telerik:RadScriptManager runat="server" ID="RSM1">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

        <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.AnimationFramework.AnimationFramework.js" />
        <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Animation.AnimationScripts.js" />
    </Scripts>
</telerik:RadScriptManager>

<div id="myDiv" style="width: 100px; height: 100px; background-color: gray; border: 1px solid black;"></div>

<a href="#" onclick="moveDiv(); return false;">Apply margin-left</a>

<script>
    function moveDiv() {
        $telerik.transition($get("myDiv"), { "margin-left": 500 }, 500, "easeIn", animationComplete);
    }

    function animationComplete(sender, args) {
        alert("Animation completed!");
    }
</script>

See Also

In this article