ASP.NET Ajax Controls and jQuery

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:ScriptReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Common.Core.js"/>

2. Add a ScriptReference pointing to jQuery.js

   <asp:ScriptReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Common.jQuery.js"/>

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

<telerik:RadScriptManagerrunat="server"ID="RadScriptManager1">
<Scripts>
<asp:ScriptReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Common.Core.js"/>
<asp:ScriptReferenceAssembly="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:

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

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

<scripttype="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:RadScriptManagerrunat="server"ID="RadScriptManager1">
<Scripts>
<asp:ScriptReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Common.Core.js"/>
<asp:ScriptReferenceAssembly="Telerik.Web.UI"Name="Telerik.Web.UI.Common.jQuery.js"/>
</Scripts>
</telerik:RadScriptManager>

<telerik:RadComboBoxrunat="server"ID="RadComboBox1"Width="300px"Skin="Telerik">
<Items>
<telerik:RadComboBoxItemText="ASP.NET AJAX UI Controls"/>
<telerik:RadComboBoxItemText="WinForms UI Controls"/>
<telerik:RadComboBoxItemText="WPF UI Controls"/>
<telerik:RadComboBoxItemText="Silverlight UI Controls"/>
<telerik:RadComboBoxItemText="Telerik Reporting"/>
<telerik:RadComboBoxItemText="Telerik OpenAccess ORM"/>
<telerik:RadComboBoxItemText="Telerik Sitefinity CMS"/>
</Items>
</telerik:RadComboBox>

<scripttype="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.