Client-Side Tips & Tricksfor the RadControls for ASP.NET AJAX

with Kevin Babcock

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

DEMO

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

DEMO

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

DEMO

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 )

Q & Ahttp://blogs.telerik.com/kevinbabcock