Skip to main content

ReportDesignerClientSideEventsBuilder.BeforeRender(String) Method

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

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

Assembly: DevExpress.AspNetCore.Reporting.v23.2.dll

NuGet Package: DevExpress.AspNetCore.Reporting


public ReportDesignerClientSideEventsBuilder BeforeRender(
    string callback


Name Type Description
callback String

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


Type Description

WebDocumentViewerClientSideEventsBuilder that can be used for method chaining.


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 on the page.

Example: Register a Custom Font

Install a custom font on the server to use it. Installation on the client machine is not required to correctly render the document in preview. You should install the font on the client if you want 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'];
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
See Also