# Designing Your First Telerik Report

This guide targets users who need to quickly get up and running with <a href="https://www.telerik.com/products/reporting/embedded-reporting.aspx" target="_blank">Telerik Reporting</a> and design and export a report.

* First, you will install Telerik Reporting from an MSI file and load the demos.

* Next, you'll create a sample report with the Standalone Report Designer, connect it to data, and visualize the result.

* Then, you will set the report title, header, and footer, and add some basic styling.

* Finally, you will export the report to a PDF file.

At the end, you'll be able to achieve the following result.

![Preview of the final version of the Demo Report](https://www.telerik.com/products/reporting/documentation/assets/f17ac2de2ac61448537cc02dc8c1a0cd/demoreport.png)

For an advanced first-steps scenario on integrating a Telerik Report in an application, refer to the getting started guide on [integrating a report in a web application](https://www.telerik.com/products/reporting/documentation/getting-started/first-steps-integrating).

## Prerequisites

The following prerequisites are required for accomplishing the scenario in this tutorial. For more information on the third-party tooling versions supported by Telerik Reporting, refer to the [list with system requirements](https://www.telerik.com/products/reporting/system-requirements).

* Install Microsoft SQL Server Management Studio.

## Step 1: Install Telerik Reporting

Let's start with the installation of the Telerik Reporting controls, services, and demos:

1. Log in to your [Telerik account](https://www.telerik.com/account). Click **Downloads** and select **Progress Telerik Reporting**.

2. Download the latest version of the MSI file in the **Installation** section.

3. In the **Customization** step, make sure that the Examples are selected for installation.

   The examples use the MS SQL Server AdventureWorks sample database which you will need later for the report.

4. In the **Samples Database Setup** dialog of the Wizard, select your **Database Server** and the authentication for the connection.

   The Wizard detects all running instances and lists them in the input field.

   ![The Page for Database Setup when Installing Telerik Reporting](https://www.telerik.com/products/reporting/documentation/assets/6120964e6d46f938c8839ad80a9f6afd/install.png)

5. On each subsequent dialog that the Wizard will render, click **Install** and select **Next** until the installation is completed.

## Step 2: Create the Sample Report

Next, you'll need to create the report:

1. Navigate to the installation folder, for example, `C:\Program Files (x86)\Progress\Telerik Reporting 2026 Q4\Report Designer`, and run the `Telerik.ReportDesigner.exe` file which will start the Standalone Designer.

2. Click **New** > **Blank Report** and choose a destination for saving the report.

   Each newly created report renders the **pageHeaderSection**, **detailSection**, and **pageFooterSection** sections. The report also provides the **Report Header** and **Report Footer** sections which are hidden by default.

   ![The Design View of a Blank Report Created in the Standalone Report Designer](https://www.telerik.com/products/reporting/documentation/assets/22a8b250eff14d495ef21f72daed5393/initialview.png)

## Step 3: Populate the Report with Data

In this step, you'll add the [SqlDataSource component](https://www.telerik.com/products/reporting/documentation/designing-reports/connecting-to-data/data-source-components/sqldatasource-component/overview) and present the fetched data into a table item.

This guide uses the **AdventureWorks** sample database that may be deployed optionally with the installation of Telerik Reporting examples. The data sources that will be added to the report will generate their data representations.

So, first, let's connect to the data and, then, you'll create the table to present it:

1. Select the predefined connection string in the Standalone Designer by choosing from its toolbar **Data** > **SQL Data Source** > **Existing data connections** > **local:/Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString**.

   ![How to Choose Data Connection in the SqlDataSource Wizard](https://www.telerik.com/products/reporting/documentation/assets/c4c80210961d2aa51c85c90eccf3ccb6/3.png)

2. Click **Next** > **Use as a shared connection** > **Next**.

3. On the screen that loads, fill in the **Select Statement** field with the query below. The query will extract only the first 14 employees and they will be listed in ascending order according to their `id`, that is, the employee with an `id=1` will be the first one, the employee with an `id=2` will come second, and so on.

   ```SQL
   SELECT
              [HumanResources].[vEmployee].[EmployeeID],
              [HumanResources].[vEmployee].[FirstName],
              [HumanResources].[vEmployee].[LastName],
              [HumanResources].[vEmployee].[JobTitle],
              [HumanResources].[vEmployee].[Phone]
   FROM    [HumanResources].[vEmployee]
   WHERE   [HumanResources].[vEmployee].[EmployeeID] <= 14
   ORDER BY [HumanResources].[vEmployee].[EmployeeID] ASC
   ```

4. Click **Next** to execute the query and the **Execute Query...** button on the next screen to preview the result. Then, click **Finish**.

5. In the **Properties** pane (**Property Browser**) on the right, change the name of the data source to `tableDataSource` so you can later refer it and render its data in the report.

   ![Renaming the SqlDataSource in the Telerik Standalone Report Designer](https://www.telerik.com/products/reporting/documentation/assets/dccbf94625838ab32553f383bbbc3d1c/property-browser-pane.png)

6. Select the **detailSection** (the middle section of the report). From the toolbar, go to **Insert** > **Table** > **Table Wizard**. Under **Data Sources**, select **tableDataSource** and click **Next**.

7. On the screen that loads, select all listed data source fields and drag them to the **Table Columns**. Click **Next**.

8. From the window that opens, select a predefined style for your table, for example, **Office**. Click **Next** and **Finish**.

## Step 4: Style the Table and Set Its Title

Now, you may add some styling to the table and define its title.

1. Select the table, and in the **Properties** pane expand the **Style** node:

   * Set **BackgroundColor** and **BorderColor** > **Default** to `34, 181, 115`.

   * Set **Font > Name** to `SegoeUI`.

   * Select the table header and set the **Color** property to `White`.

2. To set the title of the table, add a [TextBox](https://www.telerik.com/products/reporting/documentation/report-items/textbox) above it:

   * Click the **detailSection** and select **Insert** > **Text Box**.

   * In the **Properties** pane, set the **Value** of the Text Box to `Employees`.

   * Center the text by setting **Style** > **TextAlign** to `Center`.

3. Let's insert two [Shapes](https://www.telerik.com/products/reporting/documentation/report-items/shape) on the sides of the title:

   * Select **Insert** > **Shape** from the **Report Items** section.

   * Set the **ShapeType** to `Horizontal Line` and the **Color** to `Silver`.

## Step 5: Set the Page Header and Footer

In this step, you'll define and style the page header and footer of your report. First, let's start with the header:

1. Click the **pageHeaderSection**. From the **Properties** pane, select **Style** > **BackgroundColor**. Set the color to `0, 105, 104`.

2. To add the title, select **Insert** from the toolbar. Click **TextBox** to automatically place the TextBox in the header.

3. Set the **Value** to `Telerik`. Add one more TextBox with text `Demo Report`.

4. Select both TextBoxes by holding the `Shift` or `Ctrl` key while clicking them with the left mouse button. From the **Properties** pane, apply the following settings:

   * Set **Style** > **Font** > **Name** to `Segoe UI`.

   * Set **Style** > **Color** to `White`.

   * Set **Style** > **TextAlign** to `Center`.

5. Add a Shape between the TextBoxes. Set the **ShapeType** to `Vertical Line` and the **LineColor** property to `White`.

After the report header is all set, let's move on to the footer of the report:

1. Click the **pageFooterSection**. Add a Textbox which will display the current date and time.

2. Set the **Expression** of the **Value** property to the `=Now()` [Date and Time function](https://www.telerik.com/products/reporting/documentation/designing-reports/connecting-to-data/expressions/expressions-reference/functions/date-and-time-functions).

3. To add a barcode item, select **Insert** > **Barcode** from the toolbar.

4. Place the link `(slug://telerikreporting/designing-reports/report-structure/barcode/overview)` in the **Value** field of the **Barcode**. If you receive an error stating that the barcode is too large, change the **Encoder** to `QRCode`.

5. Set the **BackgroundColor** of the footer to `242, 242, 242`.

## Step 6: Export the Data to PDF

Here you go with a nice and neat report that provides some basic data to present. If you need to share it, now is the time to export it. For the purposes of this guide, you'll export it to PDF:

1. Go to the **Home** toolbar item and click **Preview**.

2. Click **Export** and select **Acrobat (PDF) file**.

3. Save your report document from the pop-up dialog.

That was it! Now you are ready to deep-dive into Telerik Reporting and take full advantage of its more advanced functionalities!

## Next Steps

* [First Steps Guide: Integrating Reports in Applications](https://www.telerik.com/products/reporting/documentation/getting-started/first-steps-integrating)
* [Designing Reports Overview](https://www.telerik.com/products/reporting/documentation/designing-reports/overview)
* [About Telerik Reporting](https://www.telerik.com/products/reporting/documentation/getting-started/about-telerik-reporting)

## See Also

* [Web Report Designer User Guide](https://www.telerik.com/products/reporting/documentation/wrd-user-guide/user-guide-overview)