Transcript Slides - Telerik

Client-Side Tips & Tricks
for 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.
AGENDA
>
>
>
>
>
>
>
ASP.NET AJAX Client-Side Basics
Common Features
Events
Data Binding
jQuery Integration
Looking Forward
Q&A
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
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
}
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;
}
}
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
);
ASP.NET AJAX Client-Side Basics
ScriptManager Controls
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-Side Basics
ScriptManager 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)
> 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-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 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 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
Compatibility with other versions
window.$ = $telerik.$;
<script type="text/javascript">
(function($) {
$(document).ready(function() {
alert("Hooray! The document is ready!");
});
})($telerik.$);
</script>
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 )
http://blogs.telerik.com/kevinbabcock