New to Telerik Reporting? Download free 30-day trial

Styling Report Items Overview

Telerik Reporting uses a built-in styling model that is similar to CSS. The model provides for very fine-grained visual customization of all elements of a report directly in the Report designer. This CSS-like mechanism offers full control over such things as the background, colors, borders, and images for every item on your report.

All Style properties of a report item that have not been specifically set for that report item will inherit the corresponding value from the report item's parent.

Below is a list of the available styling options alongside short summaries of what they represent:

Property Description
BackgroundColor A Color that represents the background color of the report item. Can be selected from the widget or written by hand as RGB, RGBA, or Hex color. The default value is Empty, which indicates that this property is not set.
BackgroundImage Represents the image to display in the background of the report item. Supports BMP, GIF, JPG, JPEG, PNG, ICO, EMF, and WMF image files.
  • ImageData - An Image containing the image data of this BackgroundImage. Use this property if you want to bind the BackgroundImage to an image that is not in the data source.
  • MimeType - The MIME type of the current BackgroundImage object.
  • Repeat - Indicates how a background image will be repeated. The available values are:
    • NoRepeat - The background image will be displayed only once.
    • Repeat - The background image will be repeated vertically and horizontally.
    • RepeatX - The background image will be repeated horizontally.
    • RepeatY - The background image will be repeated vertically.
Report items have no background image by default.
BorderColor The border color of the item can be set by using the properties Default, Left, Right, Top, and Bottom. The Default property is used to set all border colors at once. All borders are Black by default.
BorderStyle The border style of the item can be set by using the properties Default, Left, Right, Top, and Bottom. The Default property is used to set all border styles at once. The available border styles are:
  • None - No line.
  • Solid - Solid line.
  • Dotted - Dotted line.
  • Dashed - Dashed line.
  • Double - Double solid line.
  • Groove - Grooved line for a sunken border appearance.
  • Ridge - Ridged line for a raised border appearance.
  • Inset - Inset line for a sunken item appearance.
  • Outset - Outset line for a raised item appearance.
All borders are BorderType.None by default.
BorderWidth The border width of the item can be set by using the properties Default, Left, Right, Top, and Bottom. The Default property is used to set all border widths at once, however, the more specific rules will override the Default setting. For example, if you set the Default and then you set only the Top, then the Default will be applied to Bottom, Left, and Right only. All borders are 1pt wide by default.
Color The foreground Color of the report item. Can be selected from the widget or written by hand as RGB, RGBA, or Hex color. The default color is Black.
Font Defines a particular format for text, including font face, size, and style attributes. The Font type exposes the following members:
  • Bold - Boolean. Indicates whether this Font is bold.
  • Italic - Boolean. Indicates whether this Font is italic.
  • Name - String. The face name of this Font.
  • Size - Telerik.Reporting.Drawing.Unit. The size of this Font measured in Units.
  • Strikeout - Boolean. Indicates whether this Font specifies a horizontal line through the font.
  • Style - FontStyle enumeration that contains style information for this Font.
  • Underline - Boolean. Indicates whether this Font is underlined.
By default the font of a report item is Arial-Regular, 10pts.
LineColor The Color (stroke) representing the line color of report items that support it, such as lines and shapes. By default, the value is Black.
LineStyle Represents the line style of the report item. The available values are:
  • Solid - Solid line.
  • Dotted - Dotted line.
  • Dashed - Dashed line.
By default the line style is LineStyle.Solid.
LineWidth Represents the line width of report items that support it, such as lines and shapes. By default, the width is 1pt.
Padding Represents the padding of the report item. You can set the padding of the item by using the properties Left, Right, Top, and Bottom. Padding on all sides is 0 by default.
TextAlign Represents the horizontal alignment of text in the report item. The following horizontal alignments are available:
  • Left - Specifies that the text is aligned to the left.
  • Center - Specifies that the text is aligned to the center.
  • Right - Specifies that the text is aligned to the right.
  • Justify - Specifies that the text is justified.
By default, the TextAlign is Left.
VerticalAlign Represents the vertical alignment of text in the report item. The following vertical alignments are available:
  • Top - Specifies that the object is aligned to the top.
  • Center - Specifies that the object is aligned to the middle.
  • Bottom - Specifies that the object is aligned to the bottom.
By default, the VerticalAlign is Top.
Visible Boolean. Indicates whether the report item is displayed in the rendered document. The default value is True

Notes

  • Some of the style properties behave differently in specific scenarios.

    For example, in the graph series' DataPointStyle, instead of using the BorderColor/BorderStyle/BorderWidth properties to style the graph's data points, you should use the LineColor/LineWidth/LineStyle properties.

  • Consider using numerical codes as (A)RGB or HEX when setting style colors. Using color names is not guaranteed to work in all scenarios.

    For example, the color name 'ControlDarkDark' corresponds to SystemColors.ControlDarkDark is translated to ThreeDDarkShadow color, which is an obsolete CSS2 color and is rendered as RGB (0,0,0) by modern browsers.

See Also

In this article