ReportDesignerClientSideEventsBuilder.BeforeRender(String) Method

Specifies the JavaScript function that handles the client-side BeforeRender event.

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

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

Declaration

public ReportDesignerClientSideEventsBuilder BeforeRender(
    string callback
)

Parameters

Name Type Description
callback String

The name of a JavaScript function or entire JavaScript function code that runs when the BeforeRender event occurs.

Returns

Type Description
ReportDesignerClientSideEventsBuilder

WebDocumentViewerClientSideEventsBuilder that can be used for method chaining.

Remarks

Handle the BeforeRender event to customize the Web Report Designer’s View Model before it is bound to an HTML element and/or Knockout binding is activated.

The handler function receives two parameters: the first parameter is the JSReportDesigner object, the second is the Report Designer model that allows you to adjust the control’s settings.

You can handle the BeforeRender event to obtain the JSReportDesigner object and store it in the global variable for use in JavaScript code on the page.

Example: Hide the Actions Group in the Properties Panel

The following code hides the context-sensitive Actions group in the Properties panel:

<script type="text/javascript" id="script">
    function onBeforeRender(s, e) {
        e.popularVisible = ko.observable(false);
    }
</script>
@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("1000px")
        .ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
        .Bind("TestReport");
    @designerRender.RenderHtml()
}

Example: Register a Custom Font

Install a custom font on the server to use it. Installation on the client machine is not required for the correct rendering of the document in the preview. You should install the font on the client if you wish to display a custom font in End-User Designer design mode.

The following code substitutes the Arial font with the Arial Unicode MS font available on the server. The new font appears in the Web Report Designer’s Font drop-down list. The updateFont method accepts a key-value pair, where the key is the font name, and the value is the font’s display name.

<script type="text/javascript" id="script">
    function onBeforeRender(s, e) {
        e.updateFont({ 'Arial Unicode MS': 'Arial Unicode MS' });
        var fonts = DevExpress.Analytics.Widgets.Internal.availableFonts();
        delete fonts['Arial'];
    }
</script>
@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("1000px")
        .ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
        .Bind("TestReport");
    @designerRender.RenderHtml()
}
See Also