Adding the Controls to Your Project

This article provides details and lists additional information on adding the Telerik UI for ASP.NET AJAX controls to an existing ASP.NET web application or website, and also focuses on the way to provision the needed prerequisites.

For the step-by-step guides on getting up and running with the suite, refer to the following articles:

• First Steps with MSI
• First Steps with ZIP
• First Steps with NuGet

Prerequisites

Before adding a control to your project, verify that the server, development machine, and the web application or website meet the following requirements:

1. Install ASP.NET AJAX, which comes with .NET 4.5+ installations.

2. If your web application is not using ASP.NET AJAX, configure it to do so. For detailed instructions, refer to the Adding ASP.NET AJAX Features to an Existing Web Application and How to Do Web Forms in VS 2022 (Even Though Microsoft Recommends Blazor/.NET 6) articles.

3. Add the needed HTTP handlers in the web.config file as described in the web.config settings overview article.

4. Add the needed assemblies and the required references to the solution. You can find the Telerik.Web.UI.dll file and the other assemblies in the Telerik_UI_for_ASP.NET_AJAX_20xx_x_xxx_Dev_hotfix.zip file that you can download from your Telerik account.

   You can also automate the previous two steps by using the Convert to Telerik Web Application option in the Telerik Visual Studio Extensions.

5. Add a ScriptManager control at the top of the page where you intend to add a control.

   <asp:ScriptManager ID="ScriptManager1" runat="server" />                
   
   If the page is a content page or a user control, you can add the ScriptManager to the master or main page. For more information, refer to the <a href="https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.scriptmanager?view=netframework-4.8" target="_blank">Microsoft dedicated article</a>.
   

   Alternatively, you can use the ScriptManager, which extends the standard ScriptManager control and adds more features.

Adding Controls to WebForms

To add a Telerik control to an ASP.NET WebForm, either drag the Telerik control from the toolbox or manually add the control to the form.

Dragging the Control from the Toolbox

To add a Telerik control, drag it from the Visual Studio .NET Toolbox in the Design mode. Visual Studio will automatically copy the Telerik.Web.UI.dll to the bin folder of your web application and will create the respective references.

If the Telerik controls aren't in the toolbox, refer to the Adding the Telerik Controls to the Visual Studio Toolbox article.

Adding the Control Manually

You can manually add any control to the page by using the following instructions:

1. Copy the Telerik.Web.UI.dll assembly from the binXX folder of the Telerik UI for ASP.NET AJAX installation to the bin folder of your web application (where XX specifies the version of the .NET framework supported by the assembly), and reference it. For more information about the assemblies in the installation packages, refer to the Included Assemblies article.

2. Open your aspx or ascx file and add the Telerik UI for ASP.NET AJAX Register directive at the top so that Visual Studio recognizes the Telerik control tags:

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

   If multiple pages in your application will use Telerik controls, add the following lines to the web.config file so you don't need to add the Register directive to every page or user control.

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

3. In the body of the Web Form, add the tags of the desired Telerik controls. Always place the Telerik AJAX controls after the ScriptManager declaration and inside the <form> tag. Also, make sure that the RenderMode property of the controls is set to Lightweight.

           <form id="form1" runat="server">
           <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
           <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" Text="Some Text" runat="server" />
           <telerik:RadPushButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Submit"></telerik:RadPushButton>
       </form>
   ````
   

   Configuring the Controls

   After you've added the needed controls, you can configure them by using the following approaches:

   • Use the built-in properties from the markup or the code-behind.

   • Use the inner tags of the control.

   • Use the configuration wizard in the Visual Studio Designer.

   For more information about the properties and features of each individual control, refer to their documentation and demos, and also use the IntelliSense in Visual Studio.

   See Also

   • First Steps with MSI
   • First Steps with ZIP
   • First Steps with NuGet
   • Setting the web.config File
   • Included Assemblies
   • Adding the Telerik Controls to the Visual Studio Toolbox
   • Visual Studio Extensions Overview
   • Getting Started with Telerik UI for ASP.NET AJAX (Video Tutorials)