Properties Panel

• Oct 06, 2021
• 4 minutes to read

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

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.

  

• Click an element on the Design Surface and click the button to invoke the Properties panel.

• Select an element in Report Explorer and click the 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.

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.

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

The property marker indicates whether the property value was changed:

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

  

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

  

• 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).

  

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.

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 data fields and functions. Click an expression marker (f-marker) to invoke the Expression Editor.

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

The blue f-marker indicates properties with expressions:

Search for Properties

Click the 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.

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.

  

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

  

• 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.

  

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:

ASP.NET Web Forms

<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>

ASP.NET MVC

<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>

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner1";
    settings.ClientSideEvents.BeforeRender = "removeAppearanceSection";
}).Bind(Model).GetHtml()

ASP.NET Core

<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>

    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height("1000px")
            .ClientSideEvents(configure =>
            {
                configure.BeforeRender("removeAppearanceSection");
            })
            .Bind("TestReport");
        @designerRender.RenderHtml()
    }

Angular

 

report-designer.html

<dx-report-designer [reportUrl]="reportUrl" height="700px">
    <dxrd-callbacks (BeforeRender)="RemoveAppearanceSection($event)">
    </dxrd-callbacks>
    <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl">
    </dxrd-request-options>
</dx-report-designer>

 

report-designer.ts

import { groups } from 'devexpress-reporting/dx-reportdesigner'
import { Component } from '@angular/core';


@Component({
  selector: 'report-designer',
  templateUrl: './report-designer.html'
// ...
})

export class ReportDesignerComponent {
    // ...

    RemoveAppearanceSection(event) {
        var group = groups["Appearance"];
        group.info.splice(0, group.info.length);
    }
    // ...
}

React

import React from "react";
import { groups } from 'devexpress-reporting/dx-reportdesigner'
import ko from "knockout";

class ReportDesigner extends React.Component {
    constructor(props) {
        super(props);
// ...

        this.callbacks = {
            BeforeRender: function(s,e) {
                var group = groups["Appearance"];
                group.info.splice(0, group.info.length);
            }
        };
    }
    componentDidMount() {
      ko.applyBindings(
        {
          //...
          callbacks: this.callbacks
        },
        this.refs.designer
      );
    }

// ...
}
export default ReportDesigner;

Vue

import ko from "knockout";
import { groups } from 'devexpress-reporting/dx-reportdesigner'

var componentData = {
    name: "ReportDesignerComponent",
    mounted() {
    // ...
    var callbacks = {  
          BeforeRender: function(){
                var group = groups["Appearance"];
                group.info.splice(0, group.info.length);
                }
            };  
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.designer);
    },
  // ...
};
export default componentData;

Blazor

 

reporting_DesignerCustomization.js

window.ReportingDesignerCustomization = {
    RemoveAppearanceSection: function (s, e) {
       var group = e.dx.Reporting.Designer.Widgets.groups["Appearance"];
        group.info.splice(0, group.info.length);
}

 

_Host.cshtml

<script src="~/js/reporting_DesignerCustomization.js"></script>

 

Designer.razor

<DxReportDesigner ReportUrl="SampleReport" Height="1000px" Width="100%">
    <DxReportDesignerCallbacks BeforeRender="ReportingDesignerCustomization.RemoveAppearanceSection" />
</DxReportDesigner>