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.
|
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:
|
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:
|
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:
|
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:
|
VerticalAlign | Represents the vertical alignment of text in the report item. The following vertical alignments are
available:
|
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.