First Steps with UI for ASP.NET AJAX

This article explains how to get the Telerik UI for ASP.NET AJAX controls in your project and start using them quickly. The process consists of the following steps:

1. Download the Controls
2. Add the Controls to Your Project
3. Add a Control to a Page

Once you have your first simple control up and running, take a look at the next steps section to start exploring the control functionality in more detail.

Download the Controls

The easiest way to get the controls to your development machine is to use the Telerik Control Panel or to download the automated MSI installer from Your telerik.com account.

Figure 1: Download automated (.msi) installer

If you are not a customer, you can download a free, fully functional trial and the same options will apply to you as well.

The following article can help you choose the installation type that is most suitable for your needs and preferences: Which File Do I Need to Install.

Add the Controls to Your Project

The easiest way to get the Telerik UI for ASP.NET AJAX controls in your project is to:

1. Install the Telerik AJAX Visual Studio Extensions. You can easily do this in Visual Studio - go to Tools > Extensions and Updates > search the Online Visual Studio Marketplace for "telerik asp.net ajax vsextensions".

   Make sure that you restart VS to allow it to install the extensions.

   Figure 2: Get the Telerik AJAX VS Extensions

   

2. Reference the controls in your project:

   • If you already have a WebForms project, run the Convert Project Wizard.

     Figure 3: Go to Telerik > UI for ASP.NET AJAX > Convert to Telerik Web Application

     

   • If you do not have a project, run the Create Project Wizard.

     Figure 4: Go to Telerik > UI for ASP.NET AJAX > Create new Telerik Project

     

If you prefer full manual control over your project, you can copy the Telerik assemblies to the ~/bin and add references to them through the Visual Studio interface. In this case you should also update the web.config. The controls come packaged in several assemblies and to get started, you only need Telerik.Web.UI.dll, Telerik.Web.UI.Skins.dll and Telerik.Web.Design.dll.

Add a Control to a Page

The final step is to actually use a control on a page and run it in the browser:

1. Add a ScriptManager control on top of the page in which you are going to add a Telerik control. This is required by any MS AJAX-based control.

   ASPX

   <form id="form1" runat="server">
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
       </telerik:RadScriptManager>
   

2. Register the Telerik namespace with the project:

   • To register the namespace on all pages and user controls, add the following to your web.config:

     web.config

       <system.web>
         <pages>
             <controls>
                 <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />
             </controls>
         </pages> 
     

   • If you want the controls available on the current page only, add the following Register directive just below the <%@ Page %> directive:

     ASPX

     <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
     

3. Add a Telerik control to the page, for example, a RadEditor:

   ASPX

   <form id="form1" runat="server">
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
       </telerik:RadScriptManager>
       <telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight">
           <Content>
               Congratulations! You have the Telerik UI for ASP.NET controls running in your project!
           </Content>
       </telerik:RadEditor>
   

   • You can also drag a control from the Toolbox. If you do not see the controls in the toolbox, examine the Adding the Telerik Controls to the Visual Studio Toolbox article.

4. Run the page in the browser by pressing F5. You should see something like this:

   Figure 5: The final result

   

Next Steps

Now that you have the Telerik UI for ASP.NET AJAX controls running in your project, you may want to explore their features, customize their behavior or change their appearance. Below you can find guidance on getting started with such tasks:

• Explore control features
• Customize control behavior
• Change control appearance
• Further information

See Also

• System Requirements
• Browser Support
• Progress Virtual Classroom