Ever needed a demo using RadControls for ASP.NET AJAX using the Q1 2008 RadControls suite?

I visited DevConnections in Orlando about a month ago. There my colleague Todd Anglin and I held a vendor session called "Developing Rich, Responsive Applications using Telerik RadControls for ASP.NET AJAX". My team had prepared a demo for the vendor session - and we have 3 major goals when we started implementing it:

• We wanted to keep the code to a minimum (which I think we managed quite nicely). Most of the about 200 lines of server code are related to database queries, and the client-side only uses about 40 lines of code.
• We wanted it to be real life and do something meaningful, so we chose to use the well-known Northwind database
• We wanted to use AJAX and Web Services in order to ensure fast, efficient and responsive application.

At the vendor session I focused on clarifying when it is good to use AJAX, and when it is better to use Web services to achieve the desired result. In my experience, the potential of using web services for speeding up the performance of an application is very underutilised - not only are they powerful, but since a lot of our products from the RadControls suite have built-in WebService support - it is also very simple to use them.

It is best to use AJAX when there is some kind of a process involved, and to use WebServices for data presentation. The main reason for this is that AJAX maintains the whole application state, providing for "integrity" between the different components on the page, while the Web services are pure, lightweight - but have no "sense" of state. Without getting into much further detail (perhaps I should devote a separate blog post on that one) and to avoid boring you, I gladly present you the application itself to explore, download and play with: 

Code library link: http://www.telerik.com/community/code-library/submission/b311D-bechtd.aspx

Overview

The following demo application uses the Microsoft Northwind database and controls from the RadControls suite to develop a rich interactive application with very little amount of code. The application uses AJAX and WebServices to load data on demand, and demonstrates the seamless integration of RadControls into the MS AJAX framework, as well as the built in web-service support of several RadControls.

The application consists of a master page, and two ASPX pages – Default.aspx and EuropeanCountries.aspx. Both pages provide somewhat similar functionality and display similar data, but with somewhat different approaches. The client code needed for fine-tuning the application totals less than 50 lines, and practically all the server-side code is related to accessing the database and processing the returned datasets.

What the application is about

The main application page features a tree view with countries on the left, and a grid on the right.

• Clicking on a tree node causes the customers for a particular country to be displayed using a web service to load the data.
• Additional information [e.g. the customer profile] is displayed in a tooltip which uses a web service to fetch data on demand.
• The grid on the right side features the orders a customer made so far, and its content is loaded with AJAX (a partial page update occurs) when a customer is selected from the tree view.
• Clicking on a grid row causes additional information about an order to be displayed (e.g. the type and number of products in that order) in a tooltip that loads its data using a web service.

RadControls featured in the application

The controls used in the application are:

RadSplitter (for page layout), RadTreeView (for country/customers hierarchy), RadGrid (for grid data), RadToolTip (for various tasks where rich-content loaded on demand is needed), RadWindow (a fully customizable windowed control used as a dialog container), RadComboBox (as a rich dropdown), RadDatePicker (for choosing dates), RadFormDecorator (to style page buttons, checkboxes and radiobuttons if any), RadMenu (for horizontal navigation)

Extras

1. Additional codeless features demonstrated in the application are grid sorting, grid alternating rows and row hover effects.
2. When using a Web Service to load content [e.g. in a tooltip], it is not possible to load a typed user control. At first glance it seems one must manually construct the whole HTML response by using code. However, the application features a much better, yet very simple approach – using reflection to bind a data object to a control, without the need for casting the control to its actual type. This allows for using regular .ASCX-es with markup that is easy to change by designers.
3. There is client code in the RadWindow that loads order lists that causes the window to shrink or expand, depending on the number of orders when the order grid loads. This code will later enter into the RadWindow product itself and will be exposed from a Boolean property.

Demo screenshots

1. The application main page, featuring a tree with customers organized in hierarchy by country. Customer orders are on the right. Hovering a customer causes his/her profile to be fetched from the database using a web service.

2.  Demonstration how the web-service call for loading customers is executed

3. Hovering a customer causes his profile to be displayed in a tooltip

4. Clicking a row for an order causes the products ordered to be displayed in a tooltip using a web service.

5. Each order can be edited by clicking on the Edit link on the right. This causes a separate dialog to be loaded (using a RadWindow) where the order details can be changed. Once the changes are confirmed and the order is updated, the dialog causes the grid to refresh using AJAX to display the changes immediately.

6. The European customers page features an image map of Europe, where each country is marked as an image area. Hovering the image area causes a tooltip to appear featuring clickable links for all customers from the selected country.

7. Clicking on a customer causes a new dialog to appear featuring all the customer orders. The window’s height is automatically changed to be as high as the orders’ list.