CRM Application Using RadControls for ASP.NET AJAX

Requirements
RadControls version	Telerik.Web.UI v2008.1 515 (Q1, SP1)+
.NET version	.Net2.0+
Visual Studio version	2005+
programming language	JavaScript, C#
browser support	all browsers supported by RadControls

PROJECT DESCRIPTION 

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.

You can find more information in the attached MS Word document.

Changes in Telerik NorthWind CRM Example

1. 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.
2. On page load the first client node in the Customers treeview is selected. This automatically populates the RadGrid in the Ordes RadPane.
3. 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.
4. We fixed a problem with pop-up window resizing, when the user is in the European Countries tab and selects a customer.

Hi..
I can't run the sample code.. 

Error 11 The type 'UserControls_CustomerDetails' already contains a definition for 'Data' C:\CRM\UserControls\OrderDetails.ascx.cs 14 19 

Do have a version with the CS project file that can be downloaded?

thanks

Hello Jon,

The example should work properly on your side. I tested it again and I was not able to reproduce the reported error. You can see my test in the attached video. Am I missing something?

All the best,
Rumen
the Telerik team

The downloaded code does not contain the solution and project files.
???

Hi Jon,

This is WebSite project - you do not need project or solution files.

Sincerely yours,
Vlad
the Telerik team

Ok.. Your video shows opening a solution file

Hi Jon,

Indeed, the video shows a solution file, because I manually copied /pasted it from the C:\Documents and Settings\UserName\My Documents\Visual Studio 2005\Projects\CRM_Example_Web_UI folder to the root of my web site folder to show you that the project works as expected. You can find the CRM_Example_Web_UI.sln file attached to my reply.

Best regards,
Rumen
the Telerik team

Error in the example. Error says"this._tooltips.length' is null or not an object"

Don't see a way to attach the screen shot.

Hi Chao,

Please, open a support ticket from your account and provide steps to reproduce and attach a screenshot of the error. Thank you in advance!

Best regards,
Rumen
the Telerik team

This is probably a silly question but...

How can I get the CRM application to scroll down in my browser?

I have made some changes and allowed the main page to have an additional Radgrid below the existing Orders Radgrid.  However, I can only see half of the new Radgrid data because I can not scroll down.

Silly, but for the the life of my I can't get a scroll bar to appear in my browser if data extends past the bottom of the screen.

Thanks

Hi Rick,

If possible, please create a support ticket and attach a demo project that exhibits this behavior. That will enable our support team to quickly analyze your situation and provide you with a quick solution.

If you are unable to create a sample project for a support ticket, you should play with your css styles and try to enable the scrolling on your side.

Best regards,
Rumen
the Telerik team

Thanks for the hint.  The css style was my problem.

In the "html, body, form" section I changed overflow:
from:
overflow: hidden;
to:
overflow: auto;

I now have an Hor. scroll bar when it's needed.

Thanks

hi this is sudheer
i am working as a software engineer in satyam computer at india.
i am using radgridview in my application and i am in first column iam displaying images .
But i am not able to sort that images.
i am requesting u to plz send me the code for that as early as possble.

thanks and reagard
k.sudheer
India