Skip to main content

DxReportDesignerCallbacks.CustomizeElements Property

Specifies the JavaScript function that handles the Web Report Designer’s CustomizeElements client-side event.

Namespace: DevExpress.Blazor.Reporting

Assembly: DevExpress.Blazor.Reporting.v22.1.JSBasedControls.dll

NuGet Package: DevExpress.Blazor.Reporting.JSBasedControls

Declaration

[Parameter]
public string CustomizeElements { get; set; }

Property Value

Type Description
String

The name of a JavaScript function used to handle the CustomizeElements event.

Remarks

The CustomizeElements event enables you to customize the Web Report Designer’s UI elements.

The handler function receives two parameters - the first parameter is the client-side Document Viewer (the event sender) that exposes the dx property to access the client-side DevExpress objects. The second parameter is an object with the following properties and methods:

  • Elements
    A collection of the Web Report Designer’s UI elements.

  • GetById
    A method that allows you to obtain the element by its ID specified with the DevExpress.Reporting.Designer.Utils.ReportDesignerElements enumeration. Use the s.dx notation to access the enumeration. The enumeration contains the following values:

    • MenuButton - the menu button in the Designer’s upper-left corner.
    • NavigationPanel - the panel at the bottom that shows opened reports.
    • RightPanel - the panel on the right with the Field List, Report Explorer and Properties tabs.
    • Surface - the design surface.
    • Toolbar - the Report Designer Toolbar.
    • Toolbox - the Toolbox with report controls.

The following code hides the Main Menu button:

window.ReportingDesignerCustomization = {
    onCustomizeElements: function (s, e) {
        //Remove Menu button
        var menuButton = e.GetById(s.dx.Reporting.Designer.Utils.ReportDesignerElements.MenuButton); 
        var menuButtonIndex = e.Elements.indexOf(menuButton);
        menuButtonIndex !== -1 && e.Elements.splice(menuButtonIndex, 1)
    }
}
See Also