Client-Side Tips & Tricks - PowerPoint Presentation

1. Client-Side Tips & Tricksfor the RadControls for ASP.NET AJAXwith Kevin Babcock

2. GOALGet 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&AAGENDA

4. ASP.NET AJAX Client-Side BasicsIntroductionThe 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 BasicsCreating Classes// Register namespaceType.registerNameSpace(‘Telerik.Web.UI’);Telerik.Web.UI.RadInputControl = function(element) { this._emptyMessage = null; // Other member variables}

6. ASP.NET AJAX Client-Side BasicsCreating 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 BasicsCreating Classes – cont.Telerik.Web.UI.RadInputControl.prototype = { // Add or Remove Events add_focus : function(handler) { … }, remove_focus : function(handler) { … }} // Register ClassTelerik.Web.UI.RadInputControl.registerClass( 'Telerik.Web.UI.RadInputControl', Telerik.Web.UI.RadWebControl);

8. ASP.NET AJAX Client-Side BasicsScriptManager 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 scriptASP.NET ScriptManagerTelerik RadScriptManager Combine scripts on the server Minimize # of connection required to download scripts

9. ASP.NET AJAX Client-Side BasicsScriptManager Controls – cont.<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/MyCustomControl.js"/> <asp:ScriptReference Path="~/MyOtherCustomControl.js"/> </Scripts> <Services> <asp:ServiceReference Path="MyService.asmx" /> </Services></asp:ScriptManager>

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.<telerik:RadGrid ID="RadGrid1" runat="server" /><script type="text/javascript"> var gridElement = $get('<%= RadGrid1.ClientID %>'); var gridObject = $find('<%= RadGrid1.ClientID %>');</script>

12. Basic Features of the RadControlsRadAjax 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 RadControlsOther Controls Access to data through the use of properties Dynamically change the behavior Rich client-side events Persist changes to the server

14. DEMO

15. Basic Features of the RadControlsData 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 RadControlsCommon Syntax<telerik:RadTreeView ID="RadTreeView1“ runat="server"    OnClientNodePopulating="nodePopulating">    <Nodes>        <telerik:RadTreeNode runat="server" Text=“Root Node" Value="1“ ExpandMode="WebService" >    </Nodes>    <WebServiceSettings Path=“MyService.asmx" Method="GetTreeViewData" /></telerik:RadTreeView>

17. Basic Features of the RadControlsCommon Syntax<script type="text/javascript">   function nodePopulating(sender, eventArgs)   {       var node = eventArgs.get_node();       var context = eventArgs.get_context();       context[“ID"] = node.get_value();   }</script>

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

19. DEMO

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

21. jQuery Integrationwindow.$ = $telerik.$;<script type="text/javascript"> (function($) { $(document).ready(function() { alert("Hooray! The document is ready!"); }); })($telerik.$);</script>Compatibility with other versions

22. DEMO

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. Q & Ahttp://blogs.telerik.com/kevinbabcock