Add Custom Item to Report Designer

[August Eggers]

Is there anyway to do something similar to the custom toolbar items in the report viewer?

https://help.boldreports.com/report-viewer-sdk/angular-reporting/report-viewer/toolbar-customization/

I just want a Save and a Save As option, not anything to Device or Server. But I cannot find any documentation for this outside of ASP.NET which I do not want to do.

[Arumugasami Murugesan]

Hi August,    

  

Thanks for the update, 

 

We will check and update the further details by November 18, 2021 

         

Regards,         

Arumugasami M         

[Arumugasami Murugesan]

Hi August,     

Please find the below steps to add the Add Custom Item to Report Designer

 

Step1: We have disable the report open and New buttons in toolbar using toolbar settings.
https://help.boldreports.com/javascript/report-designer/api-reference/properties/toolbarSettings/   

 

Please refer the below Documents for your reference 

https://help.boldreports.com/embedded-reporting/javascript-reporting/report-designer/api-reference/properties/toolbarSettings/ 

https://help.boldreports.com/embedded-reporting/javascript-reporting/report-designer/api-reference/methods/ 

 

 

Step2: You need to add the customize icon by referring the code snippet 

  $("#designer").boldReportDesigner({ 

                        serviceUrl: https://demos.boldreports.com/services/api/ReportingAPI, 

                        toolbarSettings: { 

                            items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Save 

                                & ~ej.ReportDesigner.ToolbarItems.Open & ~ej.ReportDesigner.ToolbarItems.New 

                        }, 

                        toolbarRendering: toolbarRendering, 

                        toolbarClick: toolbarClick 

                         

 

      }); 

Step2: To customize the save button for save report directly using toolbar rendering and toolbar-click event.  

 

    function toolbarRendering(args) {  

        if ($(args.target).hasClass('e-rptdesigner-toolbarcontainer')) {  

            var saveButton = ej.buildTag('li.e-rptdesigner-toolbarli e-designer-toolbar-align e-tooltxt', '', {}, {});  

            var saveIcon = ej.buildTag('span.e-rptdesigner-toolbar-icon e-toolbarfonticonbasic e-rptdesigner-toolbar-save e-li-item', '', {}, { title: 'Save' });  

            args.target.find('ul:first').append(saveButton.append(saveIcon));  

        }  

    }  

  

    function toolbarClick(args) {  

        if (args.click === 'Save') {  

            var designer = $('#designer').data('boldReportDesigner');  

            args.cancel = true;  

            designer.saveReport();  

        }  

    }  

 

 

          

We have prepared sample application in report designer and Please find the sample from below link 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/JS_Report_Designer-1500648068.zip 

 

Regards,          

Arumugasami M    

 

[August Eggers]

That is exactly what I needed Arumugasami, thank you!

[Arumugasami Murugesan]

Hi August,     

  

Thanks for the update,  

 

We will wait for your further update.          

 

Regards,          

Arumugasami M