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.v24.1.JSBasedControls.Common.dll

NuGet Package: DevExpress.Blazor.Reporting.JSBasedControls.Common

Declaration

C#

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

VB.NET

<Parameter>
Public Property CustomizeElements As String

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:

reporting_DesignerCustomization.js

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

_Host.cshtml

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

Designer.razor

<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
    <DxReportDesignerCallbacks CustomizeElements="ReportingDesignerCustomization.onCustomizeElements" />
</DxReportDesigner>