ActiveReports for .NET 3 Online Help Request technical support
Walkthrough: Web Viewer Control
See Also
User Guide > Samples and Walkthroughs > Walkthroughs > Professional Edition Walkthroughs > Walkthrough: Web Viewer Control

Glossary Item Box

The ActiveReports WebViewer control allows you to easily publish simple reports to the web for viewing in the browser. The client machine will not require ActiveReports or ASP.NET to be installed. The WebViewer also takes advantage of a report queueing technology to ensure the reports are executed and outputted 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.

The WebViewer does not support the use of Ole Objects

This walkthrough is split up into the following activities:

  • Adding an ActiveReport to an ASP.NET Web application
  • Connecting the report to a data source
  • Adding controls to the report to contain data
  • 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\Data Dynamics\ActiveReports for .NET 3.0\Data\NWIND.MDB.

You must also have access to Internet Information Services either from your computer or from the server. You must also run the "Configure Web Sample" option from the Data Dynamics ActiveReports for .NET 3.0 program menu from your Windows Start button.

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

Adding an ActiveReport to an ASP.NET Web application

To add an ActiveReport to your project using Visual Studio 2003

  1. Create a new ASP.NET Web application. 
  2. From the Project menu, select Add New Item
  3. Select ActiveReports 3.0 File and rename the file rptWebView.
  4. Click Open.

To add an ActiveReport to your project using Visual Studio 2005

  1. Create a new ASP.NET Web site. 
  2. From the Website menu, select Add New Item.
  3. Select ActiveReports 3.0 File and rename the file rptWebView.
  4. Click Add.
  5. Click Yes when a message box asks whether you would like to place the class in the 'App_Code' folder.

Connecting the report to a data source

To connect the report to a data source

  1. Click on the gray report DataSource icon in the Detail section to open the report DataSource dialog.
  2. Click on Build.
  3. Select Microsoft Jet 4.0 OLE DB Provider and click Next.
  4. Click the ellipsis button to browse for the access path to the NorthWind database. Click Open once you have selected the appropriate access path.
  5. Click OK to continue.
  6. In the Query field, type "Select * from products ORDER BY categoryID, productname".
  7. Click OK to return to the report design surface.

Adding controls to the report to contain data

To add controls to the report

  1. Add a GroupHeader/Footer section to rptWebView by right-clicking the design surface of the report and choosing Insert > GroupHeader/Footer.
  2. Make the following changes to the group header:
    • Change the name to ghProducts
    • 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:

    Control Name Text Location
    Label lblProductName Product Name 0, 0
    Label lblQuantityPerUnit Quantity Per Unit 1.8, 0
    Label lblInStock In Stock 3.2, 0
    Label lblUnitPrice Unit Price 4.6, 0

  4. In the Report Explorer, expand the Fields node, then the Bound node. Drag the following fields onto the detail section and set the following properties of each textbox as indicated. 

    Field Text Location OutputFormat
    ProductName Product Name 0, 0 NA
    QuantityPerUnit Quantity Per Unit 1.8, 0 NA
    UnitsInStock Units In Stock 3.2, 0 NA
    UnitPrice Unit Price 4.6, 0 Currency

Adding the ActiveReports WebViewer control to the Web Form

  1. Click on the ActiveReport WebViewer control in the appropriate toolbox and drag it onto the Web Form.
  2. Adjust the size according to your needs.
  3. Change the ReportName property to rptWebView.
  4. Make sure the ViewerType property is set to HtmlViewer.
To view the report in PDF format, change the ViewerType property to AcrobatReader. To use the ActiveX Viewer, change the ViewerType property to ActiveXViewer and paste the ActiveX viewer .cab file in your project folder (for help with this see "Using ActiveX Viewer Control on the Web").

See Also

©2009. All Rights Reserved.