Telerik.Web.UI v2008.1 515 (Q1, SP1)+
|Visual Studio version
all browsers supported by RadControls
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)
- Additional codeless features demonstrated in the application are grid sorting, grid alternating rows and row hover effects.
- 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.
- 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.
You can find more information in the attached MS Word document.
Changes in Telerik NorthWind CRM Example
- The RadTabStrip control is added to enable switching between Main Page and European Customers modes. Both are implemented as user controls respectively MainPage.ascx and EuropeanCountries.ascx.
- On page load the first client node in the Customers treeview is selected. This automatically populates the RadGrid in the Ordes RadPane.
- We implemented skin chooser functionallity. The user can apply different skins on the page controls by selecting from the combobox located in the header. The default skin is Web20.
- We fixed a problem with pop-up window resizing, when the user is in the European Countries tab and selects a customer.