How to add a new item to the Report Viewer toolbar?

The below section explains how to add a new item to the Report Viewer’s toolbar.

You can add custom items to the toolbar using the customItems property in toolbarSettings, and this property will be triggered while initializing the toolbar rendering in Report Viewer.

You can provide functionality for the custom item or override an existing functionality using the toolBarItemClick.

Add a new item to an existing toolbar group

To add a new custom item to an existing Report Viewer toolbar group, you need to set the customItems property in toolbarSettings and provide a JSON array of collection input with the groupIndex, index, itemType, cssClass name, and tooltip properties as given in the following code snippet.

$(function () {
        $("#viewer").boldReportViewer({
            reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
            reportPath: '~/Resources/docs/sales-order-detail.rdl',
            toolbarSettings: {
                showToolbar: true,
                items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
                customGroups: [{
                    items: [{
                        type: 'Default',
                        cssClass: "e-icon e-mail e-reportviewer-icon CustomGroup",
                        id: 'CustomGroup',
                        tooltip: { header: 'CustomGroup', content: 'toolbargroups'}
                    },
                    {
                        type: 'Default',
                        cssClass: "e-icon e-mail e-reportviewer-icon subCustomGroup",
                        id: 'subCustomGroup',
                        tooltip: { header: 'subCustomGroup', content: 'subtoolbargroups'}
                    }],
                    groupIndex: 3
                }]
            },
            toolBarItemClick: ontoolBarItemClick
        });
    });

//Toolbar click event handler
function ontoolBarItemClick(args) {
    if (args.value === "CustomGroup") {
        //Implement the code to CustomGroup toolbar option
        alert("CustomGroup toolbar option clicked");
    }
    if (args.value === "subCustomGroup") {
        //Implement the code to subCustomGroup toolbar option
        alert("SubCustomGroup toolbar option clicked");
    }
}