Toolbar customization

To customize the Bold Reports® Angular Report Viewer toolbar, use the templates and the Report Viewer toolbar customization properties. You can hide the toolbar to show a customized user interface, or customize the toolbar icons and element appearance.

This tutorial uses the Sales Order Detail.rdl report. Download the Sales Order Detail report. You can add the reports from the Bold Reports® installation location. For more information, refer to Samples and demos.

How do I hide toolbar items?

To hide toolbar items in the Angular Report Viewer, set the toolbarSettings property. The following code can be used to remove the parameter option from the toolbar and hide the parameter block.

Similarly, you can show or hide all other toolbar options with the help of toolbarSettings.items enum.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ~ej.ReportViewer.ToolbarItems.Parameters,
        }
    }
}

The following code sample hides the print options from the toolbar items.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ~ej.ReportViewer.ToolbarItems.Print,
        }
    }
}

How do I enable the stop option in the toolbar?

To enable the stop option in the Angular Report Viewer toolbar, set the toolbarSettings.items property to ej.ReportViewer.ToolbarItems.All. The following code can be used to enable stop option in toolbar.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ej.ReportViewer.ToolbarItems.All,
        }
    }
}

How do I enable the export setup option in the toolbar?

To enable the export setup option in the Angular Report Viewer toolbar, set the toolbarSettings.items property to ej.ReportViewer.ToolbarItems.All. The following code can be used to enable export setup option in toolbar.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ej.ReportViewer.ToolbarItems.All
        }
    }
}

How do I enable the search text option in the toolbar?

To enable the search text option in the Angular Report Viewer toolbar, set the toolbarSettings.items property to ej.ReportViewer.ToolbarItems.All. The following code can be used to enable search text option in toolbar.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ej.ReportViewer.ToolbarItems.All
        }
    }
}

How do I hide the toolbar?

To hide the Angular Report Viewer toolbar, set the showToolbar property to false.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            showToolbar: false,
        }
    }
}

How do I show or hide the export options?

To show or hide the default export types in the Angular Report Viewer, use the exportOptions property. The following code hides the HTML export type from the default export options.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [exportSettings] = "exportSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public exportSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.exportSettings = {
            exportOptions: ej.ReportViewer.ExportOptions.All & ~ej.ReportViewer.ExportOptions.HTML
        }
    }
}

How do I add custom items to the export drop-down?

To add custom items to the export drop-down available in the Angular Report Viewer toolbar, use the customItems property and provide the JSON array of collection input with the index, cssClass name, and value properties. Register the exportItemClick event to handle the custom item actions, as in the following code snippet:

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [exportSettings] = "exportSettings"
    (exportItemClick) = "onExportItemClick($event)">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public exportSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.exportSettings = {
            customItems: [{
                index: 2,
                cssClass: '',
                value: 'Text File'
            },
            {
                index: 4,
                cssClass: '',
                value: 'DOT'
            }]
        };
    }

    //Export click event handler
    onExportItemClick(event) {
        if (event.value === "Text File") {
            //Implement the code to export report as Text
            alert("Text File export option clicked");
        } else if (event.value === "DOT") {
            //Implement the code to export report as DOT
            alert("DOT export option clicked");
        }
    }
}

How do I add a custom toolbar item?

To add custom items to the Angular Report Viewer toolbar, use the toolbarSettings property. You must register the toolBarItemClick event to handle the newly added custom items action.

How do I add a custom item to an existing toolbar group?

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

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings"
    (toolBarItemClick) = "onToolBarItemClick($event)">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            showToolbar: true,
            items: ~ej.ReportViewer.ToolbarItems.Print,
            customItems: [{
                groupIndex: 1,
                index: 1,
                type: 'Default',
                cssClass: "e-icon e-mail e-reportviewer-icon",
                id: 'E-Mail',
                tooltip: {
                    header: 'E-Mail',
                    content: 'Send rendered report as mail attachment'
                }
            }]
        }
    }

    //Toolbar click event handler
    onToolBarItemClick(event) {
        if (event.value === "CustomItem") {
            //Implement the code to CustomItem toolbar option
            alert("CustomItem toolbar option Clicked");
        }
    }
}

How do I add a new toolbar group?

To add a new toolbar group and custom items to the Angular Report Viewer toolbar, use the customGroups property in the toolbarSettings and provide the JSON array of collection input with the groupIndex and items properties. The items should have the itemType, cssClass, and tooltip properties, as in the following code snippet:

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings"
    (toolBarItemClick) = "onToolBarItemClick($event)">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            showToolbar: true,
            items: ~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
            }]
        }
    }

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

How do I hide paper sizes in the page settings?

To hide one or more paper sizes in the Angular Report Viewer page settings, use the hidePagePaperSizes property with comma-separated values.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [pageSettings] = "pageSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public pageSettings: any;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.pageSettings = {
            hidePagePaperSizes: ["A3", "A4", "Letter"]
        };
    }

See also