To start/open the designer, double click on the Report.cs file or right click on it and select "View Designer".
The Telerik Report Designer has the following elements:
Report selector button: Located in the upper left hand of the report designer. Clicking this button makes the report active in the Properties window.
Rulers: on the top and left side of the designer provide a point of reference to the report layout.
Report Sections: The high level report design consists of report sections for the report header, report footer, page header, page footer, detail, group header and group footer. Each section can be resized by dragging the sizing grips at the bottom/right of each section. Most sections except the detail can be deleted by selecting the section and hitting the delete key. To delete a group section, you have to delete the whole group from the Group Explorer
Component Tray: shows the DataSource components that are used in this report.
Context Menu: This menu will conditionally display contents depending on the area that was right-clicked. In the figure below the menu is invoked in the area next to the report design surface.
Design Views Buttons: Use these buttons to switch between Design, Preview and HTML view mode of the report.
All the buttons in the toolstip, placed at the lower left corner of the designer, are designed to ease you in your Report Designing experience.
They toggle various different options that help in aligning, snapping and stretching the report items and also adjust different designer settings.
Zoom - the combo box enables you to easily specify the zoom percentage in which you see the design surface. You can do that by holding the Ctrl key and use the mouse wheel to zoom as well.
Show/hide the snap grid button switches on or off the displayed snap grid. The snap grid provides a set of horizontal and vertical gridlines that — when you drag an object on the design surface — will snap or pull towards the closest vertical or horizontal gridlines. Objects can also snap to column and row dividers within a grid panel. Here is a workspace showing the snap grid turned on:
Turn on/off snapping to gridlines - this option allows you to drag objects on the design surface and have them snap to the grid lines shown on the designer surface. The snapping will be applied regardless of the visibility of the snap grid.
Turn on/off snapping to snaplines - when this option is enabled, it allows you to drag objects on the design surface and snap them to the margins or alignment lines (red dashed line) of other objects within the same container element such as a layout panel, column and row dividers in a grid panel. If a container has padding applied, it will be taken into account when snapping an object inside the container.
Show/Hide Dimensions - when enabled, the designer will show the distances from the currently selected object to the nearest elements.
Show/Hide watermarks - if enabled, the report watermarks will be shown in the designer. Note that the displayed watermarks are just for a reference and their contents may not look the same as when rendered.
Turn On/Off Pan - this option allows you to switch between drag and pan mode in designer. When enabled, the cursor is changed to a hand and clicking and dragging on the designer surface will move the report contents. This tool is useful when working on higher zoom levels.
Show/Hide the report MiniMap - In the lower-right corner of the design surface, click Show MiniMap. This element is especially useful when you have zoomed the report and want to focus on a specific element. To hide the map, click on the design surface to have it closed.
Change the alignment of an element
Alignment determines how an element resizes. For example, a left aligned element stretches to the right as the parent layout container gets resized.
To change the alignment of an element use the Layout toolbar and do one of the following:
Select two report items and change their HorizontalAlignment by clicking Left , Center , Right , or Stretch .
Select two report items and change their VerticalAlignment by clicking Top , Center , Bottom , or Stretch .
You can also change alignment by moving an element on the design surface.