Properties Panel

  • 4 minutes to read

This document describes how to use the Properties panel to access and customize the report and report element properties.

web-designer-properties-panel

Select a Report Element

Do one of the following to access an element's properties:

  • Select an element from the drop-down list at the top of the Properties panel.

    web-designer-properties-panel-select-element

  • Click an element on the Design Surface and click the web-report-designer-prop erties-tab button to invoke the Properties panel.

  • Select an element in Report Explorer and click the web-designer-report-explorer-properties-button button.

Switch Between Display Modes

Element settings are displayed in alphabetical order or in categories. Use the buttons next to the selected element to switch between display modes.

web-designer-properties-panel-display-modes

Change Property Values

Each property record consists of a caption, a value editor, and an optional property marker. To change a property value, select the property and specify its value in the editor.

web-report-designer-properties-panel-edit-property

Certain properties contain nested properties which can be accessed when you click the header.

web-report-designer-object-property

The property marker indicates whether the property value was changed:

  • If a property stores a default value, its property marker is gray.

    web-report-designer-object-property

  • If a property value was changed, the property marker becomes white.

    web-report-designer-object-property

  • If a report style overrides a property value, the marker is light blue. This applies to appearance properties (for instance, an element's BackColor, Font, Borders).

    web-report-designer-object-property

Reset Property Values

Click the property marker to the right of the editor. Select Reset in the invoked popup menu to restore the default property values.

web-report-designer-properties-panel-reset-property

NOTE

The Reset command resets the expression and the value you specified in the property's editor.

Specify Expressions

The Properties panel allows you to specify expressions that can include two or more data fields and functions. Click a property marker to see whether the invoked context menu has the "PropertyName" Expression item.

web-report-designer-properties-panel-reset-property

Click this item to specify an expression in the invoked Expression Editor.

web-report-designer-properties-panel-reset-property

The Properties panel highlights properties that have an assigned expression.

web-report-designer-properties-panel-reset-property

Search for Properties

Click the web-designer-properties-panel-filter-button button to show the search box. When you type in the search box, the Properties panel filters the list of available properties and highlights the search string in the property record.

web-designer-properties-panel-searching

Use Actions

In the categorized mode, the Properties panel contains the context-sensitive Actions group that provides the most commonly used actions for the selected report element:

  • Add new bands, if you selected a report.

    web-designer-properties-panel-report-actions

  • Manage a table element's cells, rows, and columns.

    web-designer-properties-panel-tablecell-actions

  • Align and position report elements (for instance, align and resize elements to the snap grid, specify horizontal and vertical alignments) for individual and multiple selected report elements.

    web-designer-properties-panel-multiselect-actions

Customize the Panel at Runtime

You can use client-side API to hide unnecessary editor groups, and hide or disable individual editors in the Properties panel.

To hide a particular property or disable the property editor, use the ASPxClientReportDesigner.GetPropertyInfo method. For JavaScript frameworks, use the JSReportDesigner.GetPropertyInfo method.

To hide a group, use the technique shown in the code sample below. The group.info property returns an array of elements within a group. The following code hides the Appearance group in the Properties panel shown for any reporting element:

<script type="text/javascript" id="script">
    function removeAppearanceSection(s, e) {
        var group = DevExpress.Reporting.Designer.Widgets.groups["Appearance"];
        group.info.splice(0, group.info.length);
    }
</script>

<dx:ASPxReportDesigner ClientInstanceName="WebReportDesigner1" ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents BeforeRender="removeAppearanceSection" />
</dx:ASPxReportDesigner>
See Also