Client-Side Tips & Tricks for RadControls for ASP.NET AJAX
Discover the client-side functionality offered by RadControls for ASP.NET AJAX, empowering developers to create high-performing web applications. Learn about client-side basics, common features, events, data binding, jQuery integration, and more.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Client-Side Tips & Tricks for the RadControls for ASP.NET AJAX with Kevin Babcock
GOAL 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.
AGENDA AGENDA > ASP.NET AJAX Client-Side Basics > Common Features > Events > Data Binding > jQuery Integration > Looking Forward > Q&A
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics 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
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics Side Basics Creating Classes // Register namespace Type.registerNameSpace( Telerik.Web.UI ); Telerik.Web.UI.RadInputControl = function(element) { this._emptyMessage = null; // Other member variables }
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics Creating Classes cont. Side Basics 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; } }
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics 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 );
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics ScriptManager Controls Side Basics ASP.NET ScriptManager > 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 Telerik RadScriptManager > Combine scripts on the server > Minimize # of connection required to download scripts
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics ScriptManager Controls cont. Side Basics <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>
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics Side Basics $get() vs. $find() $get(id, element) > Provides shorthand for document.getElementById() and element.getElementById() > Returns DOM element associated with the given ID $find(id) > Returns JavaScript object associated with the given ID
ASP.NET AJAX Client ASP.NET AJAX Client- -Side Basics $get() vs. $find() cont. Side Basics <telerik:RadGrid ID="RadGrid1" runat="server" /> <script type="text/javascript"> var gridElement = $get('<%= RadGrid1.ClientID %>'); var gridObject = $find('<%= RadGrid1.ClientID %>'); </script>
Basic Features of the RadControls 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
Basic Features of the RadControls 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
Basic Features of the RadControls 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
Basic Features of the RadControls Basic Features of the RadControls Common 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>
Basic Features of the RadControls Basic Features of the RadControls Common 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>
Basic Features of the RadControls Basic Features of the RadControls Common 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; } }
jQuery Integration 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>
jQuery Integration jQuery Integration Compatibility with other versions window.$ = $telerik.$; <script type="text/javascript"> (function($) { $(document).ready(function() { alert("Hooray! The document is ready!"); }); })($telerik.$); </script>
Wrap Up Wrap Up > ASP.NET AJAX Overview > Basic Client-Side Features > Client-Side Events > Data Biding on the Client > jQuery Integration
Looking Forward 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 )
