Web Designer
Tutorial 2: Create Tabular Report
Get Started > Tutorial 2: Create Tabular Report

In tabular reports, the data is organized along the rows and columns of a Table data region. The data in the form of fields and entities is fetched from the data set added to the report. 

What You Will Learn

This tutorial guides you through the steps to create a tabular report in ActiveReports Web Designer.

Note: This tutorial uses CustomerOrders data set.

After you complete this tutorial, you will have a report that looks similar to the following.

Access the ActiveReports Web Designer

Run the Web Designer sample (WebDesigner_MVC(Core)) located here: C:\Users\GPCTAdmin\Documents\GrapeCity Samples\ActiveReports 13\Web.
The Web Designer is opened in browser ready to create your reports.

Create Report Layout

  1. Drag and drop Table data region  onto the design area of the report. By default, you have a table with three rows and three columns.
  2. To add more columns to the table, click inside the table to display the column handle, and then click the plus sign.
      
    This adds one column to the table. Similarly, add another column to create a table with three rows and five columns.
          

Bind Data to Table Data Region

  1. To view fields in the data set, click the drop-down next to the CustomerOrders data set.
  2. To fill the table with data, drag and drop the fields onto the columns of the details row.

    In our case, drag and drop the Title field on the first column, Country field on the second column, and so on as illustrated below. The Header row above the details row is automatically filled with labels.

      
  3. To remove the table footer, right-click the bottom row and select Remove Footer.
    Note: The Data Set Name property of the table is automatically set to CustomerOrders.

Sort Table Data

You can sort the table data of any field in ascending or descending order. Let us sort our table data by Price field in descending order.

  1. From the adorner on the right side of the table, select <Details Group> and go to the Sort Expressions property. 
  2. Click Show Items and then select Add Item.
  3. Click the radio button to display the fields and select the Price field to sort the table by price.

    Note: You can also enter a sort expression in the Expression Editor: Data - Sort Expressions dialog by selecting Expression...

  4. Click descending  icon to sort the Price field in descending order. You can change the sort order to ascending by clicking the ascending  icon (default).

Add Report Title

  1. Drag and drop a TextBox control  above the table. You may need to relocate the table to create space for the text box.
  2. Click inside the text box and enter the text 'Customer Orders Report'.

Customize Appearance of Tabular Report

Note: You may need to resize and reposition the controls on the report to accommodate data, and for a cleaner look.

  1. To apply borders to the table, select the Table data region and set the BORDER - Style property to Solid.
  2. To customize Header row of the table, set the following properties for all text boxes in the row. Set the same properties to customize the title of the report, that is, the text box containing text 'Customer Orders Report'.
    Property Value
    BACKGROUND - Color Plum
    TEXT - Font Weight Bold
    TEXT - Text Align Center
  3. To customize Details row of the table, select the cells in the details row by using Ctrl+Click and set the following properties.
    Property Value
    BORDER - Style Solid
    TEXT - Text Align
    (except for the text box with 'Title' field)
    Center

Preview and Save Report

  1. Click Preview  to view the final output of your report.
  2. Exit the preview mode by clicking Back on the left side of the designer.
  3. Click Save to open the Save dialog box. Enter the report name and click Save Report