Collapse All Expand All

The ActiveReports WebViewer control allows you to easily publish reports to the web for viewing in the browser. The client machine does not require ActiveReports or ASP.NET to be installed. If you use the PDF viewer type, the client machine requires the Adobe Acrobat Reader, and if you use the Flash viewer type, the client machine requires the Adobe Flash Player.

The WebViewer also takes advantage of a report queueing technology to ensure the reports are executed and output efficiently. To use the WebViewer you will select an ActiveReport using the Report property of the WebViewer in the property list and set the ViewerType property to the viewer of your choice. Alternatively, you can set the Report property programmatically to a new instance of an ActiveReport class.

This walkthrough is split up into the following activities:

• Creating an ASP.NET Web application using ActiveReports
• Connecting the report to a data source
• Setting up a report
• Adding the ActiveReports WebViewer control to the Web Form

To complete the walkthrough, you must have access to the Northwind database.
A copy is located at C:\Program Files\GrapeCity\ActiveReports 6\Data\NWIND.MDB (on a 64-bit Wndows operating system, a copy is located in C:\Program Files (x86)\GrapeCity\ActiveReports 6\Data\NWIND.MDB).

You must also have access to Internet Information Services either from your computer or from the server to Configure the HTTPHandlers.

When you have completed this walkthrough, you will have a report that looks similar to the following.

To create an ASP.NET Web application with ActiveReports

1. From the Visual Studio File menu, select New, then Project.
2. In the New Project dialog that appears, select ASP.NET Web Application (If you have the .NET Framework 4, in the Visual Studio 2010 New Project dialog that appears, select ASP.NET Empty Web Site).
3. Rename the project and click the OK button.
4. (For Visual Studio 2010 .NET Framework 4 only) From the Visual Studio 2010 Project menu, select Add New Item.
5. (For Visual Studio 2010 .NET Framework 4 only) Select Web Form, rename it to Default.aspx and click Add.
6. (For Visual Studio 2010 .NET Framework 4 only) In the Solution Explorer, right-click the Web Form that you have added and select Set As Start Page.
7. From the Project menu, select Add New Item.
8. Select ActiveReports 6 (code-based) File, rename it, and click Add.

To connect the report to a data source

1. Click the gray report DataSource icon on the Detail section band to open the Report Data Source dialog.
   
2. On the "OLE DB" tab, next to Connection String, click the Build button.
3. In the Data Link Properties window that appears, select Microsoft Jet 4.0 OLE DB Provider and click the Next button.
4. Click the ellipsis (...) button to browse to the Northwind database. Click Open once you have selected the appropriate access path.
5. Click OK to close the window and fill in the Connection String field.
6. In the Query field, enter the following SQL query

   SQL Query	Copy Code
   SELECT * FROM Products ORDER BY CategoryID, ProductName

7. Click OK to save the data source and return to the report design surface.

To set up the report

1. Right-click the design surface of the report and choose Insert, then GroupHeader/Footer to add a group header and footer section.
2. Make the following changes to the group header:
   • Change the BackColor property to PaleVioletRed.
   • Change the DataField property to CategoryID.
   • Change the GroupKeepTogether property to FirstDetail.
   • Change the KeepTogether property to True.
3. Add the following controls to the GroupHeader section:

   Group header controls

   Control	Size	Text	Location
   Label	1, 0.198 in	Product Name	0, 0
   Label	1.1, 0.198 in	Quantity Per Unit	2.1, 0
   Label	1, 0.198 in	Units In Stock	3.7, 0
   Label	1, 0.198 in	Unit Price	4.9, 0

4. Select the detail section, and in the Properties window, make the following changes:
   • Change the CanShrink property to True.
   • Change the BackColor property to LightGray.
5. In the Report Explorer, expand the Fields node, then the Bound node.
6. Drag the following fields onto the detail section and set the properties of each textbox as indicated.

   Detail section fields

   Field	Size	Location	OutputFormat
   ProductName	1.8, 0.2 in	0, 0	NA
   QuantityPerUnit	1.5, 0.2 in	2.1, 0	NA
   UnitsInStock	1, 0.2 in	3.7, 0	NA
   UnitPrice	1, 0.2 in	4.9, 0	Currency

To add the ActiveReports WebViewer control to the ASPX

1. On the Default.aspx page, click the Design tab at the bottom.
2. From the Toolbox, drag the WebViewer control onto the page.

   If you get a Could not load file or assembly... message, an old version of ActiveReports was installed when the WebViewer was last added to the toolbox. To add the latest version of the control, right-click the toolbox and select Choose Items. In the Choose Toolbox Items dialog, clear the WebViewer check box and select the WebViewer check box with the highest version number in the Assembly Name column.

3. Drag the bottom right corner of the control to enlarge the viewer.
4. In the Properties window, drop down the ReportName property and select your report.
5. Drop down the ViewerType property, and select from the following:
   • HtmlViewer (default) displays the report in an HTML version of the report viewer, with page navigation and a Find function.
   • RawHtml displays the report as one long HTML page with no viewer interface.
   • AcrobatReader displays the report in the Adobe Reader. (The user must have the Adobe Reader installed.)
   • FlashViewer displays the report in a Flash version of the report viewer.

     Important: To use the Flash Viewer, copy the ActiveRepors.FlashViewer.swf file into your project folder. This file is located in C:\Program Files\GrapeCity\ActiveReports 6\Deployment (on a 64-bit Windows operating system, this file is located in C:\Program Files (x86)\GrapeCity\ActiveReports 6\Deployment).

6. Run the project to display the report in the selected viewer.