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 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
• Install the Visual Studio ActiveReports Add-On
• Add the Report to a .NET Project
• Use the Integrated Designer
  • Create a Table
  • Create a Chart
  • Add a New Page
  • Drill Down Reports
  • Export the Report

Ready to Try ActiveReports.NET? Download a Free Trial Today!

Build a .NET Report in No Time

In this tutorial, you’ll build a report in a .NET application using the TED Talks 2022 dataset on Kaggle.

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.

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.

Click Extensions > Manage Extensions.

Search for “ActiveReports Visual Studio-Integrated Designer.”

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

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.

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

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

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

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

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

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.

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 report types in the official user guide.

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. 

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

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.

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

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

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.

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.

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:

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

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.

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

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.

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

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

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.

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.

Drill Down Reports

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

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:

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 exporting reports 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.

Try out ActiveReports for your next project with a free 30-day trial — no credit card required, and get in touch with GrapeCity to learn more about ActiveReports.