How to customize the save and open button in the Bold Reports® Report Designer

To customize the Save and Open buttons in the Bold Reports® Report Designer, either hide the built-in buttons and add new buttons, or override the actions of the built-in buttons. Both options are described in the following sections.

How do I hide the built-in buttons and add new buttons?

To replace the Save and Open buttons in the Bold Reports® Report Designer, hide them with the toolbarSettings option and add your own buttons that open and save reports in your custom location.

  1. Hide the save and open buttons using the toolbarSettings event in the Report Designer.

    ASP.NET Core

    In an ASP.NET Core Report Designer application, you can hide the save and open buttons using the ViewBag option, as in the following code example:

    <bold-report-designer id="reportdesigner1"
                        create="controlInitialized"
                        service-url="../Home"
                        report-data-extensions="@ViewBag.ReportDataExtensions"
                        toolbar-settings="@ViewBag.toolbarSettings"
                        report-opened="reportOpened"
                        ajax-before-load="ajaxBeforeLoad"
                        report-saved="reportSaved"
                        toolbar-click="toolbarClick"
                        report-action="reportModified">
  </bold-report-designer>
    public IActionResult Index()
      {
          ViewBag.toolbarSettings = new BoldReports.Models.ReportDesigner.ToolbarSettings();
          ViewBag.toolbarSettings.Items = BoldReports.ReportDesignerEnums.ToolbarItems.All
                                              & ~BoldReports.ReportDesignerEnums.ToolbarItems.Save
                                              & ~BoldReports.ReportDesignerEnums.ToolbarItems.Open;
          return View();
      }

  2. Add a customized button and use your override codes to save and open the report to your custom location.

    ASP.NET Core

    <button id="Open" type="button" value="Open">Open</button>
    <button id="Save" type="button" value="Save" >Save</button>
<div style="height: 600px;width: 100%;">
    <bold-report-designer id="reportdesigner1"
                          create="controlInitialized"
                          service-url="../Home"
                          report-data-extensions="@ViewBag.ReportDataExtensions"
                          toolbar-settings="@ViewBag.toolbarSettings"
                          report-opened="reportOpened"
                          ajax-before-load="ajaxBeforeLoad"
                          report-saved="reportSaved"
                          toolbar-click="toolbarClick"
                          report-action="reportModified">
    </bold-report-designer>
</div>
<script>
    $("#Open").click(function (e) {
        var designer = $('#reportdesigner1').data('boldReportDesigner');
        designer.openReport("/" + catagory + "/" + reportName);
    });

    $("#Save").click(function (e) {
        var designer = $('#reportdesigner1').data('boldReportDesigner');
        if (!designer.isNewServerReport()) {
            // It is invokes the existing report save call.
            designer.saveReport();
        } else {
            // It is invokes the SaveAs report call.
            designer.saveReport("reportName");
        }
    });

How do I override the built-in Save and Open actions?

To override the built-in Save and Open actions in the Bold Reports® Report Designer, handle the SaveReportClick and OpenReportClick events, as in the following code example:

**ASP.NET Core**

 ```html
<div style="height: 600px;width: 100%;">
    <bold-report-designer id="reportdesigner1"
                          create="controlInitialized"
                          service-url="../Home"
                          report-data-extensions="@ViewBag.ReportDataExtensions"
                          save-report-click="saveMenuClick"
                          open-report-click="openMenuClick"
                          report-opened="reportOpened"
                          ajax-before-load="ajaxBeforeLoad"
                          report-saved="reportSaved"
                          toolbar-click="toolbarClick"
                          report-action="reportModified">
    </bold-report-designer>
</div>
<script>
    switch (args.select) {
        case 'Device':
         // It is invokes when opening the report from device.
            this.browseFromClient();
            args.cancel = true;
            break;
        case 'Server':
        // It is invokes when opening the report from server.
            this.browseReport(ej.ReportDesigner.BrowseType.Open);
            args.cancel = true;
            break;
        }

    function saveMenuClick(args) {
        switch (args.select) {
            case 'Save':
                // It is invokes the existing report save call.
                saveReport();
                args.cancel = true;
                break;
            case 'SaveAsDisk':
                // It is invokes the file download.
                downloadReport();
                args.cancel = true;
                break;
            case 'SaveAsServer':
                // It is invokes the save to server call.
                saveAsServer(catagory, reportName);
                args.cancel = true;
                break;
        }
    }
```