First Steps with UI for ASP.NET AJAX

This article demonstrates the steps to create a Web Forms application components. You will download the Telerik components, create a project, and add the RadEditor and RadHtmlChart controls. As RadHtmlChart requires data binding to show its full potential, you will learn how to bind the Telerik controls to sample data.

Throughout this tutorial, you'll find links to relevant articles that you don't need to read immediately, but will help you deepen your knowledge about the Telerik UI controls. If you want to experiment with the sample application created here, you can fork or download the source code from the GitHub repository.

Prerequisites

To follow the steps in this tutorial, you need:

Visual Studio 2019
.NET Framework 4.5 (or later)

The prerequisites above apply only to this article and guarantee that you can successfully complete the tutorial. For a complete list with all supported frameworks and development tools, see System Requirements.

Download the Controls

The most convenient way to get the Telerik UI for ASP.NET AJAX controls on your development machine is to download the installer file:

If you use a free trial license, go to Download the Free Trial Version.
If you have already purchased a commercial license, go to Download the Commercially Licensed Version.

Download the Free Trial Version

The trial version of the Telerik UI for ASP.NET AJAX controls provides the same functionality as the commercially licensed version, but it displays a copyright message on the page that uses the controls. To download the free trial:

Navigate to Telerik UI for ASP.NET AJAX and select Download Free Trial.
If you aren’t logged in, log in with your Telerik account.

If you don’t have a Telerik account yet, you can create one for free.
Download the installer to your development machine.

Next, continue with the Telerik UI installation.

Download the Commercially Licensed Version

If you have already purchased a commercial license, you can download the installer from your Telerik account:

Navigate to your Telerik account, select the DOWNLOADS tab, and then select Progress® Telerik® UI for ASP.NET AJAX.
Select Latest public version.

Download the Commercially Licensed Version

Install Telerik UI for ASP.NET AJAX

Run the downloaded file, follow the on-screen instructions, and accept the default options to install the controls. For step-by-step instructions, see Installing the Telerik Controls from MSI File.

During the installation, verify that Visual Studio 2019 Support is selected under Visual Studio Integration.

Enable Visual Studio Integration

This tutorial recommends using the MSI to get the Telerik controls, but there are various other ways. See Which File Do I Need to Install for a list with all distribution methods.

Create a New Project

Telerik UI for ASP.NET AJAX integrates into Visual Studio through our handy Visual Studio Extensions, which allow you to effortlessly create a pre-configured Telerik UI project.

To create the project:

Open Visual Studio and select File > New > Project.
In the search box, enter Telerik.

If there are no Telerik templates in the list, this indicates that the Telerik extensions are missing. Go to Telerik UI for ASP.NET AJAX Extension, download the file from the VS marketplace, and then install it.
Select the Telerik C# Web Forms Site template, and then select Next.
Enter MyFirstTelerikSite in the Project name field, select .NET Framework 4.5 (or later), and then select Create.
In the Create New Project Wizard, select BLANK, and then select Finish.

Create a new project

The Telerik templates for Visual Studio allow you to kick-start your application development by creating a new project that has all required resources that enable you to use the Telerik controls. But if you need to add the Telerik controls to an already existing project, see the instructions in Adding the Telerik Controls to Your Project.

To learn more about the functionalities of the Telerik ASP.NET AJAX Visual Studio Extensions, see the documents in section GENERAL INFORMATION > Integration with Visual Studio > Visual Studio Extensions document section.

Add RadEditor to the Application

The Web Forms Site created through the Telerik project template includes all basic references and registrations required by the Telerik UI for ASP.NET AJAX controls. The site has even a ScriptManager control that is required by all AJAX controls. That's why you can add the RadEditor control to the page in two simple steps:

Open Default.aspx, and then declare RadEditor right after RadScriptManager:

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

<telerik:RadEditor runat="server" ID="RadEditor1" </telerik:RadEditor>

Set the RenderMode and Content properties of the RadEditor control:

<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>

To run your first page with a Telerik control, press F5.

Add RadEditor to a page

Another way to add a Telerik control to your project is to drag the control directly from the VS Toolbox. For more information, see Adding the Telerik Controls to the Visual Studio Toolbox.

Add RadHtmlChart to the Project

Let’s dive a little bit deeper in the configuration of the controls from the UI for ASP.NET AJAX suite. By following the steps below, you will create a data-bound RadHtmlChart. You will also add a handy tooltip that shows the values from a custom data field. We will use a simple DataTable for this sample, but you can bind RadHtmlChart to a preferred data source type.

You already have a RadScriptManager control on the page so you are ready to declare RadHtmlChart. Place the RadHtmlChart declaration right after the RadEditor control that you added in the previous step:

In Default.aspx, define a RadHtmlChart with ID="RadHtmlChart1":

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> 
</telerik:RadHtmlChart>

Add a ChartTitle to the created RadHtmlChart:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> 
    <ChartTitle Text="Sales Log"></ChartTitle> 
</telerik:RadHtmlChart>

Add ColumnSeries to the PlotArea.Series collection of the control:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> 
    <ChartTitle Text="Sales Log"></ChartTitle> 
    <PlotArea> 
        <Series> 
            <telerik:ColumnSeries Name="Clothes"></telerik:ColumnSeries> 
        </Series> 
    </PlotArea> 
</telerik:RadHtmlChart>

In the code-behind of the page, create a GetData() method. This method returns the sample data that we will bind to the chart:

private DataTable GetData() 
    { 
        DataTable dt = new DataTable(); 

        dt.Columns.Add("labels"); 
        dt.Columns.Add("values"); 
        dt.Columns.Add("colors"); 
        dt.Columns.Add("description"); 

        dt.Rows.Add("Week 1", 3, "#99C794", " 1 blouse and 2 trousers"); 
        dt.Rows.Add("Week 2", 10, "#5FB3B3", "7 blouses and 3 skirts"); 
        dt.Rows.Add("Week 3", 7, "#FAC863", "7 skirts"); 
        dt.Rows.Add("Week 4", 12, "#6699CC", "5 blouses, 5 trousers and 2 skirts"); 

        return dt; 
    }

Private Function GetData() As DataTable 
    Dim dt As DataTable = New DataTable() 

    dt.Columns.Add("labels") 
    dt.Columns.Add("values") 
    dt.Columns.Add("colors") 
    dt.Columns.Add("description") 

    dt.Rows.Add("Week 1", 3, "#99C794", " 1 blouse and 2 trousers") 
    dt.Rows.Add("Week 2", 10, "#5FB3B3", "7 blouses and 3 skirts") 
    dt.Rows.Add("Week 3", 7, "#FAC863", "7 skirts") 
    dt.Rows.Add("Week 4", 12, "#6699CC", "5 blouses, 5 trousers and 2 skirts") 

    Return dt 
End Function

Configure the data source of the chart to use the created sample data:

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
        RadHtmlChart1.DataSource = GetData(); 
    } 
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load 
    If Not IsPostBack Then 
        RadHtmlChart1.DataSource = GetData() 
    End If 
End Sub

Set the colors and values field names to the Series DataFieldY and ColorField properties:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> 
    <ChartTitle Text="Sales Log"></ChartTitle> 
    <PlotArea> 
        <Series> 
            <telerik:ColumnSeries Name="Clothes" DataFieldY="values" ColorField="colors"></telerik:ColumnSeries> 
        </Series> 
    </PlotArea> 
</telerik:RadHtmlChart>

Set the labels field name to the PlotArea.XAxis.DataLabelsField value:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> 
    <ChartTitle Text="Sales Log"></ChartTitle> 
    <PlotArea> 
        <Series> 
            <telerik:ColumnSeries Name="Clothes" DataFieldY="values" ColorField="colors"></telerik:ColumnSeries> 
        </Series> 
        <XAxis DataLabelsField="labels"></XAxis> 
    </PlotArea> 
</telerik:RadHtmlChart>

Define a TooltipsAppearance nested tag in the series declaration. Then define a custom Tooltip template in it. All fields from the passed datasource are available through the dataItem object of the template:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> 
    <ChartTitle Text="Sales Log"></ChartTitle> 
    <PlotArea> 
        <Series> 
            <telerik:ColumnSeries Name="Clothes" DataFieldY="values" ColorField="colors"> 
                <TooltipsAppearance> 
                    <ClientTemplate> 
                        There are #=dataItem.description# sold in #=category# 
                    </ClientTemplate> 
                </TooltipsAppearance> 
            </telerik:ColumnSeries> 
        </Series> 
        <XAxis DataLabelsField="labels"></XAxis> 
    </PlotArea> 
</telerik:RadHtmlChart>

Now you can run the page by pressing F5. You should see something like this:

Bound RadHtmlChart with custom Tooltip template

Apply New Skin to the Controls

Each control in UI for ASP.NET AJAX has more than 20 predefined skins that allow you to change the look and feel of the components. To use the desired skin, set the skin name as the value of the control's Skin property:

<telerik:RadEditor runat="server" ID="RadEditor2" Skin="Glow" RenderMode="Lightweight">
    <Content>             
        Congratulations! You have the Telerik UI for ASP.NET controls running in your project!     
    </Content> 
</telerik:RadEditor>

Apply Glow Skin to RadEditor

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:

First Steps with UI for ASP.NET AJAX

Prerequisites

Download the Controls

Download the Free Trial Version

Download the Commercially Licensed Version

Install Telerik UI for ASP.NET AJAX

Create a New Project

Add RadEditor to the Application

Add RadHtmlChart to the Project

Apply New Skin to the Controls

Next Steps

Resources

Was this article helpful?

Tell us how we can improve this article

Getting Started

Support Resources

Community