1. Client-Side Tips & Tricks for the RadControls for ASP.NET AJAX with Kevin Babcock

2. GOAL Get a glimpse of what client-side functionality the RadControls for ASP.NET AJAX offer that enable ASP.NET developers to build richer, more high performing web applications.

3. > ASP.NET AJAX Client-Side Basics > Common Features > Events > Data Binding > jQuery Integration > Looking Forward > Q&A AGENDA

4. ASP.NET AJAX Client-Side Basics Introduction The ASP.NET AJAX Client-Side Library > A JavaScript library > Makes it easy to use OO principles on the client > You can use the library to: > Interact with or manipulate the DOM > Communicate asynchronously with the server > Create your own rich animations

5. ASP.NET AJAX Client-Side Basics Creating Classes // Register namespace Type.registerNameSpace(‘Telerik.Web.UI’); Telerik.Web.UI.RadInputControl = function(element) { this._emptyMessage = null; // Other member variables }

6. ASP.NET AJAX Client-Side Basics Creating Classes – cont. Telerik.Web.UI.RadInputControl.prototype = { // Add member functions initialize : function() { … }, dispose : function() { … }, get_emptyMessage : function() { return this._emptyMessage; }, set_emptyMessage : function(value) { this._emptyMessage = value; }

7. ASP.NET AJAX Client-Side Basics Creating Classes – cont. Telerik.Web.UI.RadInputControl.prototype = { // Add or Remove Events add_focus : function(handler) { … }, remove_focus : function(handler) { … } } // Register Class Telerik.Web.UI.RadInputControl.registerClass( 'Telerik.Web.UI.RadInputControl', Telerik.Web.UI.RadWebControl );

8. ASP.NET AJAX Client-Side Basics ScriptManager Controls > Add external scripts to the page > Inserts scripts after ASP.NET AJAX has been initialized > Add web service references > Call web service from client script ASP.NET ScriptManager Telerik RadScriptManager > Combine scripts on the server > Minimize # of connection required to download scripts

9. ASP.NET AJAX Client-Side Basics ScriptManager Controls – cont.

10. ASP.NET AJAX Client-Side Basics $get() vs. $find() $get(id, element) $find(id) > Provides shorthand for document.getElementById() and element.getElementById() > Returns DOM element associated with the given ID > Returns JavaScript object associated with the given ID

11. ASP.NET AJAX Client-Side Basics $get() vs. $find() – cont. var gridElement = $get(' '); var gridObject = $find(' ');

12. Basic Features of the RadControls RadAjax > Full control of Ajax functionality on the client > Can initiate part-page post backs from client script > Expose events for intercepting Ajax requests > RadAjaxLoadingPanel provides visual feedback

13. Basic Features of the RadControls Other Controls > Access to data through the use of properties > Dynamically change the behavior > Rich client-side events > Persist changes to the server

15. Basic Features of the RadControls Data Binding > Client-side data binding > Bind to web services (ASMX, WCF, etc.) > Eliminate the need for control ViewState > Small footprint than Ajax > Many controls offer declarative client-side binding > RadGrid, RadMenu, RadTreeView, RadComboBox

16. Basic Features of the RadControls Common Syntax <telerik:RadTreeNode runat="server" Text=“Root Node" Value="1“ ExpandMode="WebService" > <WebServiceSettings Path=“MyService.asmx" Method="GetTreeViewData" />

17. Basic Features of the RadControls Common Syntax function nodePopulating(sender, eventArgs) { var node = eventArgs.get_node(); var context = eventArgs.get_context(); context[“ID"] = node.get_value(); }

18. Basic Features of the RadControls Common Syntax [ScriptService] public class DataService : WebService { [WebMethod] public IEnumerable GetTreeViewData(RadTreeNodeData node, object context) { var contextData = (IDictionary )context; var result = new List (); var data = GetData(context[“ID”]); var nodes = new List (); foreach(var dataItem in data) { var node = new RadTreeNodeData { Text = data.Text, Value = data.Value, ExpandMode = TreeNodeExpandMode.WebService }; } return nodes; } }

20. jQuery Integration > jQuery is now integrated into the suite > Animations for all RadControls are being revamped > Can use the jQuery library directly with the RadControls <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" />

21. jQuery Integration window.$ = $telerik.$; (function($) { $(document).ready(function() { alert("Hooray! The document is ready!"); }); })($telerik.$); Compatibility with other versions

23. Wrap Up > ASP.NET AJAX Overview > Basic Client-Side Features > Client-Side Events > Data Biding on the Client > jQuery Integration

24. Looking Forward > Continued improvements based on your feedback > Q1 2009 Release (Next Week!) > RadScheduler client-side data binding > New Control: RadFileExplorer > New and improved training resources: > Telerik TV (http://tv.telerik.com) > Telerik Trainer (http://www.telerik.com/trainer) > Quick Start Framework (http://demos.telerik.com/aspnet-ajax )

25. http://blogs.telerik.com/kevinbabcock