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

This articles explains to customize the save and open buttons in the Report Designer application. We can able to achieve this in two ways one is Hiding the existing button and add the new buttons another one is Overriding the actions when clicking the inbuilt button.

Hiding the existing button and add the new buttons

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

   ASP.NET Core

   In ASP.NET Core Report Designer application, you can hide the save and open button using ViewBag option as shown 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-modified="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-modified="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");
           }
       });

Overriding the actions when clicking the inbuilt button

Override the Save and Open button using the SaveReportClick and OpenReportClick event as shown in the following code example.

<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-modified="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;
        }
    }