RadControls for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

As of Q3 2008, Telerik.Web.UI assembly includes the jQuery javascript library. Here is a list of RadControls that are using jQuery:

 

RadControl name

Version

RadAjaxLoadingPanel

Q3 2009

RadButton

Q3 2010

RadCalendar

Q3 2009

RadComboBox

Q1 2009

RadContextMenu

Q1 2009

RadDatePicker

Q3 2009

RadDateTimePicker

Q3 2009

RadDock

Q1 2009

RadEditor

Q3 2009

RadFileExplorer

Q3 2009

RadGrid (when using declarative client-side binding or column animations)

Q3 2008 - declarative client-side binding

Q2 2010 - column animations

RadInputManager

Q1 2009

RadImageEditor

Q2 2011

RadListView

Q1 2012

RadMenu

Q1 2009

RadMonthYearPicker

Q1 2011

RadNotification

Q2 2011

RadOrgChart

Q3 2011

RadPanelBar

Q1 2009

RadRibbonBar

Q1 2011

RadRating

Q1 2011

RadRotator

Q1 2009

RadScheduler

Q3 2008

RadSlider

Q1 2009

RadSocialShare

Q3 2011

RadSpell

Q1 2010

RadSplitter

Q1 2009

RadTagCloud

Q2 2010

RadTicker

Q1 2009

RadTimePicker

Q3 2009

RadToolTip

Q1 2009

RadTreeView

Q3 2008

RadWindow

Q1 2009

RadXmlHttpPanel

Q3 2010

Note

RadControls for ASP.NET AJAX Q1 2011 are using jQuery version 1.5.1

RadControls for ASP.NET AJAX Q1 / Q2 2010 are using jQuery version 1.4.2

RadControls for ASP.NET AJAX Q1 / Q2 2009 are using jQuery version 1.3.2

Including jQuery

If you have any of the above mentioned controls (with the specified version or newer) on your page then the jQuery is already included and you can omit this paragraph. If not - follow these steps:

1. Add a ScriptReference pointing to Core.js as we use a slightly customized version of jQuery which depends on Core.js.

We have not modified the implementation of jQuery in any way. We have just appended a few more lines of JavaScript at the end of the file in order to avoid any version conflict and to include a few useful jQuery plugins.

CopyASPX
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

2. Add a ScriptReference pointing to jQuery.js

CopyASPX
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

Here is how your RadScriptManager (or ScriptManager) should look like in the end:

CopyASPX
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
   <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" />
   </Scripts>
</telerik:RadScriptManager>

Using jQuery

After including the jQuery file you can start using it. There is a trick though - the jQuery object is available as $telerik.$ instead of the default $ or jQuery aliases. This is so to avoid compatibility issues with applications which already use (other versions of) jQuery. For more info you can check the documentation of the noConflict method.

Fortunately there are easy workarounds to enable back the $ alias. Choose one of the options below:

1. Using a global variable

CopyJavaScript
<script type="text/javascript">
    window.$ = $telerik.$;
</script>

2. Using a self-calling anonymous function:

CopyJavaScript
<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            alert("Hooray! The document is ready!");
        }
   );
    })($telerik.$);
</script>

3. Using the $telerik.$ alias:

CopyJavaScript
<script type="text/javascript">
    $telerik.$(document).ready(function () {
        alert("Document is ready");
    });
</script>

4. Include a script reference to the Telerik.Web.UI.Common.jQueryInclude.js:

CopyJavaScript
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
   <Scripts>
   ......
          <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
   </Scripts>
</telerik:RadScriptManager>

Caution

Note that loading jQueryInclude.js in a script manager will take the global jQuery object and any (external) jQuery loaded later won’t be initialized.

Use any of the approaches above.

Example

CopyASPX
<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
</telerik:RadScriptManager>
<telerik:RadComboBox runat="server" ID="RadComboBox1" Width="300px" Skin="Telerik">
   <Items>
       <telerik:RadComboBoxItem Text="ASP.NET AJAX UI Controls" />
       <telerik:RadComboBoxItem Text="WinForms UI Controls" />
       <telerik:RadComboBoxItem Text="WPF UI Controls" />
       <telerik:RadComboBoxItem Text="Silverlight UI Controls" />
       <telerik:RadComboBoxItem Text="Telerik Reporting" />
       <telerik:RadComboBoxItem Text="Telerik OpenAccess ORM" />
       <telerik:RadComboBoxItem Text="Telerik Sitefinity CMS" />
   </Items>
</telerik:RadComboBox>
<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            $('.rcbItem')
           .mouseover(function () {
               $(this).stop().animate({ paddingLeft: "30px" }, { duration: 300 });
           })
           .mouseout(function () {
               $(this).stop().animate({ paddingLeft: "4px" }, { duration: 300 });
           });
        });
    })($telerik.$);
</script>

See Also