DxDocumentViewerCallbacks.CustomizeElements Property

Specifies the handler for the CustomizeElements client-side event that allows you to customize the Web Document Viewer UI elements.

Namespace: DevExpress.Blazor.Reporting

Assembly: DevExpress.Blazor.Reporting.v25.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 allows you to customize the Web Document Viewer’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 Web Document Viewer 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 following code snippet hides the Web Document Viewer Toolbar.

reporting_ViewerCustomization.js

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

_Host.cshtml

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

Viewer.razor

<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
    <DxDocumentViewerCallbacks CustomizeElements="ReportingViewerCustomization.onCustomizeElements" />
</DxDocumentViewer>