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:
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.
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
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.
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.