New to Telerik UI for ASP.NET AJAXStart a 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:

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

NameDescription
isChromeReturns true if the User Agent is Google Chrome
isFirefoxReturns true if the User Agent is any version of Firefox
isFirefox2Returns true if the User Agent is Firefox 2
isFirefox3Returns true if the User Agent is Firefox 3
isIEReturns true if the User Agent is Internet Explorer
isIE6Returns true if the User Agent is Internet Explorer 6
isIE7Returns true if the User Agent is Internet Explorer 7
isIE8Returns true if the User Agent is Internet Explorer 8
isIE9Returns true if the User Agent is Internet Explorer 9
isTridentReturns true if the User Agent is Trident-based
isSpartanReturns true if the User Agent is Spartan-based (Microsoft Edge)
isOperaReturns true if the User Agent is Opera
isOpera11Returns true if the User Agent is Opera11
isSafariReturns true if the User Agent is any version of Safari
isSafari2Returns true if the User Agent is Safari 2
isSafari3Returns true if the User Agent is Safari 3
isSafari4Returns true if the User Agent is Safari 4
isMobileSafariReturns true if the User Agent is iPhone OS Mobile Safari
isBlackBerryReturns true if the User Agent is BlackBerry
isBlackBerry4Returns true if the User Agent is BlackBerry 4
isBlackBerry5Returns true if the User Agent is isBlackBerry 5
isBlackBerry6Returns true if the User Agent is isBlackBerry 6
isTouchDeviceReturns true if the current browser is running on a mobile device that supports touch capabilities
quirksModeReturns true if the browser agent runs in quirks mode (IE only)
standardsModeReturns true if the browser agent runs in standards mode (IE only)

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

 

NameDescription
radControlsReturns 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:

 

NameParametersReturn TypeDescription
Element Styling
addCssClasses removeCssClasseselement (HTML DOM element) classNames (Array of class names)noneAdds / Removes multiple class names to the DOM element
getCurrentStyleelement (DOM element) attribute (String) defaultValue (String)StringGets the current value of the attribute style of the specified element . If the current value is not defined, optionally returns defaultValue
getComputedStyleelement (DOM element) attribute (String) defaultValue (String)StringGets the computed value of the attribute style of the specified element . If there's no computed value, optionally returns defaultValue
getPaddingelement (DOM element) boxSide (Telerik.Web.BoxSide)IntegerReturns the padding thickness of element on the given side
getPaddingBoxelement (DOM element)Object {top, left, bottom, right, horizontal, vertical}Returns the box of padding sizes
getVisibleelement (DOM element)BooleanReturns true if element is visible, otherwise returns false
setVisibleelement (DOM element) value (Boolean)noneSet the visibility of an element
isBorderVisibleelement (DOM element) boxSide (Telerik.Web.BoxSide)BooleanWhether the current border style for an element on a specific boxSide is not 'none'.
isRightToLeftelement (DOM element)BooleanReturns true if element is in RTL direction, otherwise returns false
mergeElementAttributessource (DOM element) target (DOM element) preserve (Boolean)noneMerges 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
parseBorderWidthborderWidth (String)IntegerReturns integer value of the border width in pixels out of the borderWidth style string
parsePaddingpadding (String)IntegerReturns integer value of padding in pixels out of the padding style string
parseUnitvalue (String)Object {size, type}Returns an object with unit size and type out of value unit string
registerSkinselement (DOM element)noneRegisters 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 removeExternalHandlerelement (HTML DOM element) eventName (name of the event, e.g. "mouseover") handler (the event handler function)noneAdds / 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
cancelRawEvente (Event object)falseCancels the specified event from propagating
Element Animation
transitionelement (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)NonePerforms a custom animation of a set of CSS properties. See Transition Example.
Element Positioning
containsPointrect (Rectangle object with properties: x, y, width, height) x (X coordinate of the point) y (Y coordinate of the point)BooleanChecks 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 elementOverflowsTopelement (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)BooleanChecks if the specified HTML element overflows the screen with the specified screen size from left or top respectively
elementOverflowsBottom elementOverflowsRightscreenSize (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)BooleanChecks if the specified HTML element overflows the screen with the specified screen size from right or bottom respectively
getLocationelement (DOM element)Sys.UI.Point {x, y}Returns the absolute location of element in the document
setLocationelement (DOM element) point (Object {x, y})noneSets the location (left, top) of element to point (x, y)
getScrollOffsetelement (DOM element) recursive (Boolean)Object {x, y}Returns the scroll offset of element from its parent(s). If recursive , return the absolute scroll offset.
isMouseOverElementelement (DOM element) event (DOM event)BooleanReturns whether mouse is over element when event fires See also isMouseOverElementEx
isMouseOverElementExelement (DOM element) event (DOM event)BooleanReturns 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.
scrollIntoViewelement (DOM element)noneScrolls the parent scrollable container to element 's position. An alternative flicker-free implementation to HTMLDomElement.scrollIntoView()
Element Sizing
getBorderBoxelement (DOM element)Object {top, left, bottom, right, horizontal, vertical}Gets the border box sizes of the specified element
getBorderWidthelement (DOM element) boxSide (Telerik.Web.BoxSide)IntegerReturns the border width of element on the specified box side
getBoundselement (DOM element)Sys.UI.Bounds {x, y, width, height}Gets the coordinates, width and height of the specified element
setBoundselement (DOM element) bounds (Object {x, y, width, height}noneSets element 's border-box size to bounds
getClientBoundsnoneSys.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.
getContentSizeelement (DOM element)Object {width, height}Gets the "content-box" size of an element
setContentSizeelement (DOM element) size (Object {width, height})noneSets the content-box size of element to size
getDocumentRelativeCursorPositione (DOM event)Object {left, top}Gets the cursor position of the mouse when event e is fired, relative to the Document
getMarginelement (DOM element) boxSide (Telerik.Web.BoxSide)IntegerReturns the value of the margin of element on the specified box side
getMarginBoxelement (DOM element)Object {top, left, bottom, right, horizontal, vertical}Returns the box object with the margin sizes
getOuterBoundselement (DOM element)Object {x, y, width, height}Returns the outer bounds of element
getOuterSizeelement (DOM element)Object {width, height}Returns the outer size of element
getSizeelement (DOM element)Object {width, height}Returns the size of the element
setSizeelement (DOM element) value (Object {width, height})noneSets the border-box size of element to value
getViewPortSizenoneObject {width, height}Returns the effective size of the client viewport
Element Content Manipulation
getOuterHtmlelement (DOM element)StringReturns the outer HTML text of element (element's innerHTML and the element's own rendered HTML)
repaintChildrenparentControl (Object - Telerik control client object)noneRepaints all children elements of parentControl 's container element
Telerik controls client object access
findControlparent (HTML DOM element) id (String)Object - client Telerik control objectFinds 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
findElementparent (HTML DOM element) id (String)HTML DOM elementFinds 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
getChildByClassNameelement (parent DOM element) className (CSS class name) index (start index in the collection of child elements)HTML DOM elementReturns the first child element of element with the specified className , optionally starting from position index
getChildrenByClassNameelement (parent DOM element) className (CSS class name)ArrayReturns an array of all child elements of element with the specified className
getChildrenByTagNameelement (parent DOM element) tagName (String - tag name)ArrayReturns an array of all child elements of element with the specified tag name
getElementByClassNameelement (DOM element) className (String) tagName (String)DOM elementReturns the first child element of element with the specified className and optionally of type tagName
getFirstChildByTagNameelement (DOM element) tagName (String) index (Integer)DOM elementReturns the first child of element with the specified tagName , starting from index in the collection of child elements
getPreviousHtmlNodeelement (DOM element)DOM elementGets the previous non-text HTML sibling of element
getNextHtmlNodeelement (DOM element)DOM elementGets the next non-text HTML sibling of element
getInvisibleParentelement (DOM element)DOM elementReturns the closest parent of element that has its display style set to "none", or null if no such parent is found
isDescendantancestor (DOM element) descendant (DOM element)BooleanReturns whether descendant is a recursive child node of ancestor
isDescendantOrSelfancestor (DOM element) descendant (DOM element)BooleanReturns 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

ASP.NET
<%-- 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
Transition ExampleSee Also
Not finding the help you need?
Contact Support