As you probably know by know the Q3 2008 release is out. In this release we included the jQuery JavaScript library in our scripts. For now only RadTreeView and RadScheduler benefit from it but we plan deeper jQuery integration in the future. In this blog post I will show you how to use the built-in jQuery file in your projects.

Including jQuery

If you have RadScheduler or RadTreeView in your page jQuery is already included so you can skip to the next paragraph. If not - read ahead.

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

    Update!!! 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 the aforementioned  version conflict and to include a few useful jQuery plugins.
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
  2. Add a ScriptReference pointing to jQuery.js
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

Here is how your RadScriptManager should look like in the end:

<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 is an easy workaround to enable back the $ alias:

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

or even better use a self-calling anonymous function to avoid creating a global variable (window.$):

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

I much prefer the second option which in fact we use internally to avoid typing $telerik.$ every time.

Demo

Here is a modified version of the RadComboBox and jQuery integration demo which now uses the built-in jQuery library:

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

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

[Download]

I hope this helps.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments