v2.1.0
v2.2.0v2.1.0v2.0.0v1.2.0

Container

Container report control is a graphical element that is used as a container for other report controls. It highlights a part of a report and how the report controls appear inside it. Container control has no data associated with it.

You can use the control in several ways to enhance your reports:

  • Group the report controls visually by placing them within the Container control.
  • Anchor report controls which may otherwise be pushed down by a vertically expanding data region.
  • Create visual effects by adding borders to the Container control.
  • Display an image behind a group of report controls by adding a background image.

Some properties of the Container control are described below. Note that you need to enable Advanced Properties Mode to view all properties.

Background

Color: Select a color to use for the background.

Image: Select an image to use for the background.

Border

Width: Enter a value in points to set the width of the border.

Style: Select a style for the border.

Color: Select a color to use for the border from Color Picker, Standard Colors, or Web Colors.

Rounding Radius: Radius for the round corners of the container.

Layout

Style: Choose from the list of available styles and set to apply a style to the control.

Page Break: Inserts page break as:
   Start - Inserts page break at the start of the container.
   End - Inserts page break at end of the container.
   StartAndEnd - Inserts page break at both start and end of the container.

Keep Together: Indicates if the data inside the container is kept together on a single page if possible.

Consume White Space: Indicates that all white space in the container is consumed during report rendering when the container’s contents grow rather than preserving the minimum white space between the contents and the bounds of the container.

Note: You must first drop the Container control on the design area and then drag-drop the controls into the container. Drawing a container around existing controls does not place the controls inside the container.

Use Case

Let us create an Invoice report that uses two Container controls on top of the report to highlight two parts of the invoice: the first Container will visually group the company logos and the invoice issue information, while the second Container will highlight the shipping and billing information. Each container will use a different color. The product-related information will be provided by the Table data region.

The final report will be as shown:

  1. Create a Page Report and drag-drop the Container control onto the report's designer. Set its following properties to some suitable values, for example:

    • Width
    • Height
    • Color
  2. Drag-drop two Image controls into the Container and place them side by side in the left part of the Container. These will be the invoice report logos.

  3. To add information on order date and order ID, drag-drop [OrderDate] and [OrderID] fields from the dataset on the right part of the Container. Also add text boxes to add labels: "Order ID:", "Order Date:", and "Invoice".

  4. To highlight the shipping and billing information, drag-drop another Container control and place it below the first Container control. Set its properties to some suitable values, for example:

    • Width
    • Height
    • Color
  5. Drag-drop following data fields from the dataset on the second Container control as follows:

    • [Customers_CompanyName]
    • [Address]
    • [ShipName]
    • [ShipAddress]

    Now, add text boxes to add labels above the data fields: "Bill To:", "Address:", "Ship To:", and "Ship Address:".

  6. Drag-drop the Table data region to the report's designer below the second Container control.

  7. Bind the text boxes in the Table's Details row to [ProductName], [UnitPrice], [ProductID], and [Quantity].

  8. Improve the appearance of the controls.

  9. Preview.