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.
> ASP.NET AJAX Client-Side Basics> Common Features> Events> Data Binding> jQuery Integration> Looking Forward> Q&A
AGENDA
ASP.NET AJAX Client-Side BasicsIntroduction
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-Side BasicsCreating Classes
// Register namespaceType.registerNameSpace(‘Telerik.Web.UI’);
Telerik.Web.UI.RadInputControl = function(element) {
this._emptyMessage = null;// Other member variables
}
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; }}
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);
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 script
ASP.NET ScriptManager
Telerik RadScriptManager> Combine scripts on the server
> Minimize # of connection required to download scripts
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>
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
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>
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
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
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
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
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 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; }}
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
window.$ = $telerik.$;
<script type="text/javascript"> (function($) { $(document).ready(function() { alert("Hooray! The document is ready!"); }); })($telerik.$);</script>
Compatibility with other versions
Wrap Up
> ASP.NET AJAX Overview
> Basic Client-Side Features
> Client-Side Events
> Data Biding on the Client
> jQuery Integration
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 )