ReportDesignerClientSideEventsBuilder.CustomizeElements(String) Method

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

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

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

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerClientSideEventsBuilder CustomizeElements(
    string callback
)

VB.NET

Public Function CustomizeElements(
    callback As String
) As ReportDesignerClientSideEventsBuilder

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
ReportDesignerClientSideEventsBuilder	A ReportDesignerClientSideEventsBuilder that can be used to further configure the Report Designer Client Side Events.

Remarks

The CustomizeElements event enables you to customize the Web Report Designer’s UI elements. 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 Web Report Designer’s UI elements.

• GetById
  This method allows you to obtain the required element by its ID using the DevExpress.Reporting.Designer.Utils.ReportDesignerElements object. The following elements are available within this object:

  • MenuButton - the menu button in the upper-left corner of the Designer’s user interfaces.
  • NavigationPanel - the panel at the bottom of the Designer displaying opened report tabs.
  • RightPanel - the panel at the right of the Designer and containing tabs with the Field List, Report Explorer and Properties Panel.
  • Surface - the design surface.
  • Toolbar - the Report Designer Toolbar.
  • Toolbox - the Toolbox containing report controls.

The code sample below demonstrates how to use this event to hide the Report Designer’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.CustomizeElements("customizeElements"); });
}
@designer

JavaScript

<script type="text/javascript" id="script"> 
    function customizeElements(s, e) {
        var toolbarPart = e.GetById(DevExpress.Reporting.Designer.Utils.ReportDesignerElements.Toolbar);
        var index = e.Elements.indexOf(toolbarPart);
        e.Elements.splice(index, 1);
    }
</script>