RadControls and ASP.NET Ajax 4.0 Preview

Two days ago Bertrand Le Roy announced the first preview of ASP.NET Ajax 4.0. If you haven't read its roadmap you can check it out here. Lots of cool stuff is coming out - client-side templates, bindings, fluent client-side API (similar to jQuery) and more.

Things are a bit hectic here because of the Q2 2008 release. Nevertheless Vlad and I managed to prepare two demo pages demonstrating how to use the client-side templates introduced in the ASP.NET Ajax preview with RadGrid and RadTreeView (yes it was that easy). Both controls are bound to web services and the client-side templates are used to visually customize the look and feel of the data. Here are the steps I took to build the RadTreeView demo:

1. I registered the MicrosoftAjaxTemplates.js in the ScriptManager:
   

   <asp:ScriptManager runat="server" ID="ScriptManager1">

   <Scripts>

   <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" />

   </Scripts>

   </asp:ScriptManager>

2. Configured a RadTreeView instance to consume a web service:
   

   <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeDataBound="onNodeDataBound">

   <WebServiceSettings Path="WebService.asmx" Method="GetProducts" />

   <Nodes>

   <telerik:RadTreeNode Text="Beverages" ExpandMode="WebService">

   </telerik:RadTreeNode>

   <telerik:RadTreeNode Text="Condiments" ExpandMode="WebService">

   </telerik:RadTreeNode>

   </Nodes>

   </telerik:RadTreeView>

3. Added a LinqToSql class and dropped the Categories and Products tables (can you guess the database?) in the .dbml
4. Wrote the implementation of the GetProducts web service method which is used to populate RadTreeView:
   

   [WebMethod]

   public IList<Product> GetProducts(RadTreeNodeData node) {

   NorthwindDataContext db = new NorthwindDataContext();

   var products = from p in db.Products

   where p.Category.CategoryName == node.Text

   select p ;

   return products.ToList();

   }

5. When I ran the web site and ended up with an exception upon expanding a node: "A circular reference was detected while serializing an object of type Product". Silly me - the Product class had a Category property which in turn had a collection of Product objects. The fix was easy - set the "Child Property" of the Category_Product association to false. Everything was up and running.
6. I added a client-side template
   

   <div id="myTemplate" class="sys-template">

   <table>

   <tr>

   <td>

   {{ ProductName }}

   </td>

   <td>

   {{ UnitPrice }}

   </td>

   </tr>

   </table>

   </div>

   
   The "sys-template" CSS class only hides the template (display:none)

7. The final step was to consume the OnClientNodeDataBound event (which is a brand new client-side event occurring when a node is created during web-service load on demand) and instantiate the template inside the node's text HTML element:
   

   <script type="text/javascript">

   function onNodeDataBound(sender, args) {

   var node = args.get_node();

   var dataItem = args.get_dataItem();

   var template = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));

   template.createInstance(node.get_textElement(), dataItem);

   }

   </script>

Using the ASP.NET Ajax client-side templates is absolutely intuitive and painless! I can't wait to see the next refresh of ASP.NET Ajax 4.0.

Live Demo (RadGrid) | Live Demo (RadTreeView) | Download