We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to setup margins in code ?

I found this link here and it works fine but I was wondered if there is any documentation to setup these values in the Blazor / BoldReportsApiController ? (Something like this one here for Asp.Net MVC)

       // Method will be called when report is loaded internally to start the layout process with ReportHelper.


        public void OnReportLoaded(ReportViewerOptions reportOption)


            reportOption.ReportModel.ReportDefinition.Page.BottomMargin = ??????


2 Replies 1 reply marked as answer

SD Sathesh Dhanasekaran Syncfusion Team March 10, 2023 12:30 PM UTC

Hi Ben Junior,

Thanks for contacting Bold Reports Support,

We can setup the margin in OnInitReportOptions using  ReportSerializer.

BoldReports.RDL.DOM.ReportSerializer reportSerializer = new BoldReports.RDL.DOM.ReportSerializer();

We will share the sample for this by Mar 13, 2023.

AM Arumugasami Murugesan Syncfusion Team March 14, 2023 03:02 PM UTC

Ben Junior,

Sorry for the delay,

If you want to setup the margin in code, you need to add the below code snippet. We have prepared and attached a sample Blazor application for your reference.


In Index.razor

// Used to render the Bold Report Viewer component in Blazor page.

    public async void RenderReportViewer()


        viewerOptions.ReportName = "sales-order-detail";

        viewerOptions.ServiceURL = "/api/BoldReportsAPI";

        viewerOptions.pageSettings = new List<PageSettings>();

        PageSettings margins = new PageSettings();

        margins.top = 0.75;

        margins.right = 0.5;

        margins.bottom = 0.5;

        margins.left = 0.25;


        await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);


In boldreports-interop.js

// Interop file to render the Bold Report Viewer component with properties.

window.BoldReports = {

    RenderViewer: function (elementID, reportViewerOptions) {

        $("#" + elementID).boldReportViewer({

            reportPath: reportViewerOptions.reportName,

            reportServiceUrl: reportViewerOptions.serviceURL,

            pageSettings: {

                margins: {

                    top: reportViewerOptions.pageSettings[0].top, right: reportViewerOptions.pageSettings[0].right,

                    bottom: reportViewerOptions.pageSettings[0].bottom, left: reportViewerOptions.pageSettings[0].left








Attachment: Blazor_server_App_93ba9b16.zip

Marked as answer
Live Chat Icon For mobile
Up arrow icon