The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create a Table Report

  • 5 min to read

This tutorial describes how to create a table report on the Design Surface. This approach allows you to construct complex layouts and provides access to advanced table settings. As an alternative, you can use the Report Wizard to create basic template-based reports. Refer to the Create a Simple Data-Aware Report topic for more details on this approach.

Tip

The report created below is based on the Table Report Demo.

preview

Add a new blank report to your application.

Bind to Data

Bind the report to the Northwind SQLite database that is supplied with the Demo installation:

  1. Click the report's smart tag. Expand the DataSource drop-down list and click Add Report Data Source.

    add-datasource

  2. Select Database in the invoked Data Source Wizard and click Next.

    datasource-wizard

  3. Select the No, I'd like to specify the connection parameters myself option and click Next.

    datasource-wizard-specify-connection-params

  4. Select SQLite as the Provider and specify the path to the database file in the Database field. You can find the database file with your Demo installation at C:\Users\Public\Documents\DevExpress Demos 19.1\Components\Data\nwind.db. Click Next.

    add-datasource

  5. Save the connection string and click Next.

    datasource-wizard-save-connection-string

  6. Expand the Views group and expand the OrderDetailsExtended view. Select the OrderID, ProductName, UnitPrice, Quantity, Discount, ExtendedPrice, and Supplier fields. Click Finish.

    datasource-wizard-select-fields

Create the Report Layout

Create the Products List

  1. Expand the OrderDetailsExtended query in the Field List and select the ProductName, UnitPrice, Quantity, Discount, and ExtendedPrice fields. Hold CTRL or SHIFT and click on the fields to select multiple fields and drop them onto the Detail band.

    drag-fields

    This creates an XRTable with each cell bound to a data field.

  2. Right-click the table and select Insert / Row Below from the context menu.

    table-insert-row

  3. Click the xrTableCell6 cell's smart tag and select the Supplier field in the Expression property.

    add-supplier-field

  4. Make the currency and quantity cells span across two table rows. Select the UnitPrice, Quantity, Discount, and ExtendedPrice cells and set their RowSpan property value to 2.

    set-rowspan

  5. Format the currency and percentage data. Click the UnitPrice cell's smart tag and set Format String to {0:$#,##.00}. Use the same approach to set the Discount cell's format string to {0:0%} and the ExtendedPrice cell's format string to {0:$#,##.00}.

    format-cells

  6. Set the Supplier cell's TextFitMode property to ShrinkOnly. This adjusts the cell's font size to make variable-length text content occupy the entire cell.

    supplier-textfitmode

    Note

    Set the cell's CanGrow and CanShrink properties to false before you change its TextFitMode.

  7. Align row heights. Switch to the Report Explorer window, select xrTable1 table's xrTableRow1, and set its Height property to 35. Select xrTableRow2 and set its Height property to 55.

    set-row-height

  8. Select cells and drag their borders to adjust column widths.

    resize-columns

  9. Switch to Print Preview mode to see the report's draft version.

    draft

Add Page Headers

  1. Add a Page Header band to the report to print column headers at the top of every document page. Right-click the report surface and select Insert Band / PageHeader from the context menu.

    shared_add-bands-page-header

  2. Switch to the Field List. Select fields for which you want to create column headers. Drag and drop the selected fields onto the PageHeader band with the right mouse button.

    create-column-headers

    This creates a table where each cell shows a field name. If "camel case" is detected in a field's name, it is converted to spelling that uses white spaces. Double click cells to change column names.

  3. Add an XRLabel control to show the order number.

    add-xrlabel

  4. Click the label's smart tag. Set the Expression property to [OrderID] and set the Format String property to Details of customer order # {0}.

    xrlabel-set-expression

  5. Drag the label's corners to adjust its size.

  6. You can switch to Print Preview to see the progress.

    draft

Customize Appearance

  1. Create report styles to visually distinguish table headers and rows. Switch to the Report Explorer window, right-click the Styles item and select Edit Styles from the context menu. Add the following styles in the invoked Styles Editor:

    Property

    HeaderStyle

    OddStyle

    EvenStyle

    BackColor

    127,127,127

    234,245,255

    White

    BorderColor

    Gray

    Transparent

    Transparent

    Borders

    None

    None

    None

    BorderWidth

    1

    1

    1

    Font

    Segoe UI, 8pt, style=Bold

    Segoe UI, 12pt

    Segoe UI, 12pt

    ForeColor

    White

    Black

    Black

    Padding

    0,5,0,0

    5,5,0,0

    5,5,0,0

    edit-styles

  2. Select xrTable1 and assign the created OddStyle style to the table's OddStyle property. Assign the EvenStyle style to the table's EvenStyle.

    table-report-add-datasource

    To select a table, click the handle which appears when you hover the mouse cursor over the table. To select multiple tables, hold CTRL when you click table handles.

    select-table

  3. Select xrTable2 and assign the HeaderStyle style to the table's Style property.

  4. Set the following appearance options for xrTable1 cells:

    Property

    ProductName

    Supplier

    Other Cells

    Bold

    true

    false

    false

    Padding

    15,5,0,2

    15,5,0,10

    2,15,15,0

    TextAlignment

    BottomLeft

    TopLeft

    TopRight

    set-cell-font

  5. Set the following appearance properties for header cells:

    Property

    ProductName

    Other Cells

    TextAlignment

    MiddleLeft

    MiddleRight

    Padding

    15,5,0,0

    0,15,0,0

  6. Set the xrlabel1 control's Font to Segoe UI, 18pt to make the order number more visible.

Your report is now ready to be generated. In Visual Studio, switch to the Preview tab to view the report.

preview