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.2.dll
NuGet Package: DevExpress.AspNetCore.Reporting
Declaration
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()
}