DxReportDesignerCallbacks.PreviewCustomizeElements Property

Specifies the JavaScript function that handles the Web Report Designer’s PreviewCustomizeElements 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 PreviewCustomizeElements { get; set; }

VB.NET

<Parameter>
Public Property PreviewCustomizeElements As String

Property Value

Type	Description
String	The name of a JavaScript function used to handle the PreviewCustomizeElements event.

Remarks

The PreviewCustomizeElements event allows you to customize UI elements of the Report Designer Preview. The Report Designer Preview is the Document Viewer control built into the End-User Report Designer.

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 Preview UI elements.

• GetById
  Passes the element ID as the method’s parameter and gets the UI element. Use the s.dx notation to access the client-side DevExpress objects. Use the PreviewElements enumeration to specify the element ID.

The code sample below hides the Preview’s toolbar.

reporting_DesignerCustomization.js

window.ReportingDesignerCustomization = {
    // Hide the toolbar
    onPreviewCustomizeElements: function(s, e) {
        var toolbarPart = e.GetById(s.dx.Reporting.Viewer.PreviewElements.Toolbar);
        var index = e.Elements.indexOf(toolbarPart);
        e.Elements.splice(index, 1);
    }
}

_Host.cshtml

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

Designer.razor

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