ReportDesignerPreviewClientSideEventsBuilder.CustomizeElements(String) Method

Sets the name of the JavaScript function or the entire code that will handle the CustomizeElements client-side event of the Web Report Designer‘s Preview.

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

Assembly: DevExpress.AspNetCore.Reporting.v24.1.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerPreviewClientSideEventsBuilder CustomizeElements(
    string callback
)

VB.NET

Public Function CustomizeElements(
    callback As String
) As ReportDesignerPreviewClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or the entire JavaScript function code used to handle the CustomizeElements event.

Returns

Type	Description
ReportDesignerPreviewClientSideEventsBuilder	A ReportDesignerPreviewClientSideEventsBuilder that can be used to further configure the Report Designer Preview Client Side Events.

Remarks

The CustomizeElements event enables you to customize UI elements of the Document Viewer that is built into the Web Report Designer. When implementing a handling function, use the objects passed as parameters. The first parameter passes the event sender that is the ClientReportDesigner object. The second one is an object with the following structure.

• elements
  A collection of the UI elements included in the Web Report Designer’ Document Viewer.

• getById
  This method allows you to obtain the required element by its ID using the DevExpress.Reporting.Viewer.PreviewElements object. The following elements are available within this object:

  • RightPanel - corresponds to the panel at the right of the Viewer and containing tabs with the Document Map, Parameters and Export Options.
  • Surface - corresponds to the Viewer’s central section displaying the report document.
  • Toolbar - corresponds to the Document Viewer’s Toolbar.

The code sample below demonstrates how to use this event to hide the Document Viewer’s Toolbar.

CSHTML

@{
    var designer = Html.DevExpress().ReportDesigner("reportDesigner1").Height("1000px")
        .Bind(Model.Report)
        .DataSources(configureDS => { foreach (var ds in Model.DataSources) { configureDS.Add(ds.Key, ds.Value); } })
        .ClientSideEvents(configure => { configure.Preview(configure => { configure.CustomizeElements("previewCustomizeElements"); }); } );
}
@designer

JavaScript

<script type="text/javascript" id="script"> 
    function previewCustomizeElements(s, e) {
        var toolbar = e.GetById(DevExpress.Reporting.Viewer.PreviewElements.Toolbar);
        var index = e.Elements.indexOf(toolbar);
        e.Elements.splice(index, 1);
    }
</script>