Build a .NET Report in 10 Minutes with a Visual Studio Designer Add-On
Tags: webdev, dotnet, tutorial, devops
Published: 2023-03-01 17:59:23

---
canonical_url: https://www.grapecity.com/blogs/build-a-net-report-in-10-minutes-with-a-visual-studio-designer-add-on
description: Learn how to build a .NET report in only 10 Minutes using an integrated Visual Studio designer add-on. See more from ActiveReports today.
---

[ActiveReports](https://www.grapecity.com/activereports) is a complete reporting solution by GrapeCity for designing, viewing, and publishing reports in .NET and JavaScript. Developers can use its intuitive and easy-to-use designers to deliver interactive web or desktop reports. In addition to drag-and-drop support, ActiveReports.NET supports a code-based approach and a flexible API.

ActiveReports.NET allows you to build rich reports that support cross-platform reporting with .NET Core, which means you can integrate reports into desktop applications. You can also use it in web applications made with .NET. Additionally, ActiveReports.NET provides a Visual Studio add-on to design .NET reports, and the ActiveReportsJS tool allows you to build web-based reporting applications. It includes integration support for Angular, Vue, and React.

To use ActiveReports.NET, you use the [Visual Studio integrated designer](https://www.grapecity.com/activereportsnet/docs/latest/online/activereports-designer.html) add-on. You can use the integrated designer to create and edit reports using several approaches:

*   Drag-and-drop
*   Code-based
*   Script-based
*   regEx

The integrated designer lets you use its Report Explorer to visualize a report in a tree view. You can also use different controls for reports in the Toolbox section, which enables you to design other report types.

This tutorial will show you how to create reports quickly using the integrated designer:

*   [Prerequisites](#Prerequisites)
*   [Install the Visual Studio ActiveReports Add-On](#install_the_visual_studio)
*   [Add the Report to a .NET Project](#Add_the_report)
*   [Use the Integrated Designer](#Use_the_integrated_designer)
    *   [Create a Table](#Create_a_table)
    *   [Create a Chart](#Create_a_chart)
    *   [Add a New Page](#Add_a_new_page)
    *   [Drill Down Reports](#Drill_down_reports)
    *   [Export the Report](#Export_the_report)


## Build a .NET Report in No Time

## <span class="intro sm">In this tutorial, you’ll build a report in a .NET application using the [TED Talks 2022](https://www.kaggle.com/datasets/miguelcorraljr/ted-talks-2022?resource=download) dataset on Kaggle.</span>

### <a id="Prerequisites"></a>Prerequisites

To complete this tutorial, you’ll need to have the following:

*   Some familiarity with programming with .NET
*   Visual Studio configured for use
*   A GrapeCity account

#### Download the Kaggle Dataset

You can download the dataset to your local machine using the link from the previous section. Join Kaggle for free to access the dataset compressed file. Next, unzip the downloaded file to access the comma-separated values (CSV) file containing the actual dataset.

## <a id="install_the_visual_studio"></a>Install the Visual Studio ActiveReports Add-On

You’ll use the ActiveReports add-on in Visual Studio to access ActiveReports features.

First, launch Visual Studio and click **Continue without code**.

![Install the Visual Studio ActiveReports Add-On](https://files.grapecity.com/gc-website-media/phxlzrl5/picture1.png?width=500&height=277.77777777777777)

Click **Extensions** > **Manage Extensions**.

![Manage Extensions Visual Studio](https://files.grapecity.com/gc-website-media/ovip4dv3/picture2.png?width=500&height=195.83333333333331)

Search for “ActiveReports Visual Studio-Integrated Designer.”

![ActiveReports Visual Studio-Integrated Designer](https://files.grapecity.com/gc-website-media/r1enjnzr/picture3.png?width=500&height=304.1666666666667)

Next, click **Download**, which launches the GrapeCity ActiveReports download page in your web browser.

![ActiveReports.NET Download](https://files.grapecity.com/gc-website-media/jj4khral/picture4.png?width=500&height=275)

Then, fill in your email, accept the terms and conditions, and click **Submit** to download ActiveReports for a 30-day free trial. The download starts automatically, and you need to create a GrapeCity account if you don’t have one.

Open the downloaded ActiveReports installer to start the installation process (ensure that your Visual Studio application isn't running when installing ActiveReports). The installation modifies Visual Studio to work with ActiveReports.

Once you launch the ActiveReports installer, accept the terms and click **Install**.

** ![ActiveReports 17 Installer](https://files.grapecity.com/gc-website-media/na2nhxnu/picture5.png?width=500&height=384.61538461538464)**

The installation takes a few moments to complete. Click **Close** to exit the installation wizard.

![AR17 Installation Complete](https://files.grapecity.com/gc-website-media/053ke2rm/picture6.png?width=500&height=384.61538461538464)

After installing ActiveReports, relaunch Visual Studio and click **Create a new project** on the welcome screen.

![Create a New .NET Report in Visual Studio](https://files.grapecity.com/gc-website-media/dp2n2d3e/picture7.png?width=500&height=320.8333333333333)

In the **Create a new project** dialog box, select the **ActiveReports 17 Page Report Application** template and click **Next**.

![ActiveReports 17 Page Report Application](https://files.grapecity.com/gc-website-media/nhqfheyb/picture8.png?width=500&height=351.35135135135135)

Specify a **Project name**, such as “ActiveReportsDemo,” and click **Create**. This creates a .NET project where you can use ActiveReports.

![Configure New .NET Report Visual Studio](https://files.grapecity.com/gc-website-media/oatdqtrp/picture9.png?width=500&height=351.35135135135135)

You can either use the .NET core or .NET framework environments. ActiveReports officially suggests .NET 7.0 because it’s the latest version.

## <a id="Add_the_report"></a>Add the Report to a .NET Project

To add the report to a .NET project, right-click **ActiveReportsDemo** and navigate to **Add**. Select **New item** from the **Add** list. This opens up the **Add New Item** dialog box.

![Add the Report to a .NET Project](https://files.grapecity.com/gc-website-media/e2ia3egf/picture10.png?width=500&height=390.27777777777777)

Next, navigate to .**NET Core** > **Reporting** to see the options for ActiveReports that you can add to your project.

Choose the **ActiveReports 17 Page Report**. You can read about [<span>report types</span>](https://www.grapecity.com/activereportsnet/docs/latest/online/reporttypes.html) in the official user guide.

![ActiveReports 17 Page Report](https://files.grapecity.com/gc-website-media/mbqndjqj/picture11.png?width=500&height=346.971307120085)

Give the report a name, such as “PageReportOne,” and click the **Add** button. A notice will tell you that you have a 30-day trial period. Click **OK** to continue.<span> </span>

Once the report is added to the project, the Report Data Source dialog box appears.

![Report Data Source .NET](https://files.grapecity.com/gc-website-media/40uhq4qw/picture13.png?width=495.8333333333333&height=500)

You can give the data source a name even though the default value is **DataSource1**. For the **Type**, select **CSV Provider** because the dataset you later use from Kaggle is in CSV format. Click the **Build** (pencil) icon to launch the **Configure CSV Data Source** wizard.

In the wizard, in the **Source** section beside the **Path** field, click **Open**, then select the CSV file inside the folder where you unzipped it.

Next, from the **Column Separator** list, select **Comma**.

![Configure CSV Data Source](https://files.grapecity.com/gc-website-media/rzqjbwlr/picture14.png?width=500&height=487.5)

Go to the **Columns** section and click **Get from Preview** to fill the **Columns** area with the column names and their respective data types. The data type String is set as the default.

Change the data types to the correct types. For instance, views, likes, and duration are Integer types, as they are in the Microsoft Excel sheet. If columns do not load properly, try opening the CSV file and saving it as a new file, then load the new file.

Click **OK** to save the configuration. By default, the wizard generates the connection string. It looks like this:

```
    Path=C:\20221013_ted_talks.csv;Locale=en-US;TextQualifier=";ColumnsSeparator=,;RowsSeparator=\r\n;Columns=talk_id,title,speaker,recorded_date,published_date,event,duration,views,likes;HasHeaders=True
```

![Configure CSV Data Source](https://files.grapecity.com/gc-website-media/g4dnivex/picture15.png?width=500&height=491.6666666666667)

Click **OK** to close. The report is now connected to the CSV data source.

## <a id="Use_the_integrated_designer"></a>Use the Integrated Designer

You may need the Visual Studio ReportExplorer, which shows the elements of a report in a tree-view format. Follow these steps to show the ReportExplorer.

First, click **View** > **Other Windows** > **Report Explorer 17 **to show the **Report Explorer** window.

![show the ReportExplorer .NET](https://files.grapecity.com/gc-website-media/o0qbk2tv/picture16.png?width=457.93103448275855&height=500)

Now, right-click the Visual Studio toolbar area to see the various toolbars available. Select **ActiveReports 17 **from the list. The **ActiveReports Designer** toolbar comes up in the toolbar area.

![Select ActiveReports Designer toolbar](https://files.grapecity.com/gc-website-media/1vphdbg5/picture17.png?width=500&height=100.67567567567568)

You also need the ActiveReports **Toolbox** to pick charts, tables, and other report tools. To show or hide the **Toolbox**, navigate to the menu bar, and click **View** > **Toolbox**. This opens the **Toolbox**.

The following screenshot shows an example of what your environment could look like with the **Toolbox**, **Report Explorer**, and **Toolbar** all enabled:

<span> ![Example of environment with Toolbox, Report Explorer, and Toolbar all enabled](https://files.grapecity.com/gc-website-media/flub5pe2/picture20.png?width=500&height=290.3780068728522)</span>

### <a id="Create_a_table"></a>Create a Table

In the **Toolbox**, select **Table** and drag it to the **Report Designer** to reposition it on the top left part of the page. (If the **Toolbox** isn’t in Visual Studio, select it from the **View** menu).

![Create a Table .NET](https://files.grapecity.com/gc-website-media/5e1jn4ke/picture20.png?width=500&height=266.6666666666667)

You can add new columns by selecting a column and selecting either **Insert Column to the Left** or **Insert Column to the Right** from the list of options.

Right-click the table row headings and click **Insert Group**. The **Table - Groups** dialog box opens.

![Insert Group .NET](https://files.grapecity.com/gc-website-media/jvhboixk/picture21.png?width=500&height=448.6111111111111)

On the **General** tab, select **<Expression...>** from the **Expression** menu to open up the **Expression Editor**.

![Expression Editor](https://files.grapecity.com/gc-website-media/z0yltrgp/picture22.png?width=495.8333333333333&height=500)

Expand the **Fields** list, select **talk_id**, and click **Insert.** The **=Fields!talk_id.Value** field is displayed in the **Expression** window. Click **OK** to save.

![Expression Window](https://files.grapecity.com/gc-website-media/15nnnvuh/picture23.png?width=500&height=358.3333333333333)

Do the same for the **Document map label**, then click **OK** in the **Table Groups** dialog box.

![.NET Report Table - Groups](https://files.grapecity.com/gc-website-media/zfqh4go5/picture24.png?width=494.44444444444446&height=500)

Next, click the hamburger icon in each of the fields in the first row to select which dataset column to put into the table column.

![Select a dataset column](https://files.grapecity.com/gc-website-media/gjmbxhhk/picture25.png?width=500&height=270.83333333333337)

Select a row and right-click it, then select **Add Rows Below** to add new rows.

On the **Properties** tab, select columns or the entire table to add new styling. You can tweak properties such as **Font**, **BorderStyle**, **BorderColor**, and more. You can also expand the size of each column by dragging the column headings.

You can always switch to the **Preview** tab anytime to see the results of your settings tweaks.

### <a id="Create_a_chart"></a>Create a Chart

Locate **Chart** in the **Toolbox** and drag it to the design surface. The chart wizard comes up. You can select the different types of charts that you want to plot, including bar, column, pie, Gantt, radar, funnel, and other types.

First, select the chart you want.

Then, navigate to the **Properties** tab of the chart and click the three ellipses next to **Plots (Collection)**. This launches the **PlotDesigner Collection Editor**. You see a plot in the **Members** list of the **PlotDesigner Collection Editor** labeled **Plot1**.

Navigate to the **Encodings** > **Category** > **Values** section and click the three ellipses to add the X-axis.

Next, go to the **Encodings** > **Values** section and click the three ellipses to add the Y-axis.

![Create a Chart](https://files.grapecity.com/gc-website-media/j1lgmigi/picture26.png?width=500&height=325)

### <a id="Add_a_new_page"></a>Add a New Page

To add a new page, in the **Report Explorer**, click **Report** > **Document Outline.**

Right-click on a page and select **Insert** from the list of options shown. You can also delete a page from this list.

### <a id="Drill_down_reports"></a>Drill Down Reports

The following screenshots are sample pages of reports created to demonstrate reports:

![Drill Down .NET Reports](https://files.grapecity.com/gc-website-media/i4fmsegc/picture27.png?width=391.6666666666667&height=500)

![Graph .NET Report](https://files.grapecity.com/gc-website-media/rwzdkxla/picture28.png?width=387.5&height=500)

The first page has a section titled **GRAPH OF VIEWS AND LIKES**. You create the title with the **TextBox** tool from the **Toolbar**. When you click the **+** icon on the left side of the title, it toggles between a graph and a chart. This changes its **Visibility** property on the **Properties** tab, as shown in the image below:

![Visibility Properties .NET Report](https://files.grapecity.com/gc-website-media/xrqdk0ph/picture29.png?width=500&height=418.80341880341877)

### <a id="Export_the_report"></a>Export the Report

To export your report, you need some NuGet packages that serve as extensions to render reports. Follow these steps to install them:

First, go to **Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution**. This opens up the **NuGet - Solution** tab.

Next, search for any of the following packages depending on which exporting format you want to use:

*   ActiveReports.Export.Excel
*   ActiveReports.Export.Html
*   ActiveReports.Export.Image
*   ActiveReports.Export.Pdf
*   ActiveReports.Export.Word
*   ActiveReports.Export.Xml

Read more about [<span>exporting reports</span>](https://www.grapecity.com/activereportsnet/docs/latest/online/export-reports.html) in the official documentation.

# Conclusion

This tutorial shows you how to quickly set up a reporting project with the Visual Studio integrated designer add-on. You start by installing the add-on and then adding a report to your project. Then, you can design the report with tables, charts, and other elements. You can also drill down into the reports and create multiple pages.

ActiveReports offers you several features for customizations so you can make your reports beautiful, informative, and interactive.