Customizing the Save Button in Bold Reports Report Designer

When working with the Bold Report Designer, you may want to customize the toolbar to suit your application’s needs. One common requirement is to control the visibility and behavior of the Save button. This can be achieved by using the toolbarSettings, toolbarRendering, and toolbarClick events. This article describes how to hide the default Save button in the Report Designer and implement a new custom button that meets your desired needs.

Hiding the Default Save Button

To hide the default Save button in the Bold Reports Report Designer, you can use the toolbarSettings property. The following JavaScript code demonstrates how to achieve this:

$(function () {
    $("#designer").boldReportDesigner({
        serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
	toolbarSettings: {
    	    items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Save
	},
    });
});

Adding a Custom Save Button

Once the default Save button is hidden, you can proceed to add a custom Save button using the toolbarRendering event. The code snippet below shows how to add a custom Save button to the toolbar:

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));
    }
}

Implementing the Custom Save Functionality

To define the behavior of your custom Save button, you can use the toolbarClick event. This event allows you to specify the actions to be taken when the Save button is clicked. Below is an example of how to implement the Save functionality:

function toolbarClick(args) {
	if (args.click === 'Save') {
		args.cancel = true;
		var designer = $('#designer' ).data('boldReportDesigner');
		designer.saveReport();
	}
}

Complete Code Snippet

Here is the complete code snippet that combines all the steps mentioned above:

<div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
<script type="text/javascript">
    $(function () {
        $("#designer").boldReportDesigner({
            serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
		    toolbarSettings: {
				items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Save
			},
			toolbarClick: "toolbarClick",
			toolbarRendering: "toolbarRendering"
        });
    });
			
    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') {
			args.cancel = true;
			var designer = $('#designer' ).data('boldReportDesigner');
			designer.saveReport();
		}
	}
</script>

Preview snapshot:

By following these steps, you can effectively customize the Save button in the Bold Reports Report Designer to suit your specific needs. You can download the complete sample application for the Embedded JavaScript Report Designer with the above changes from the provided link.