Thursday, November 06, 2008
by
Atanas Korchev
|
Comments
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.
- 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" />
- 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.